Почему input недоступен из-за tabindex="-1"?

Question

[KOPC1886]

<a class="btn btn-primary btn-large" href="#testModal" data-toggle="modal">Запустить демонстрацию модального элемента</a>
    <div id="testModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <h3>Тест header</h3>
        </div>
        <div class="modal-body" style="clear: both;">
            <h3>Тест body</h3>
            <div>
<code lang="php">


                <?
                $APPLICATION->IncludeComponent('bitrix:main.calendar', '', Array(
                        'SHOW_INPUT' => 'Y',
                        'FORM_NAME' => '',
                        'INPUT_NAME' => 'date_from',
                        'INPUT_NAME_FINISH'=> 'date_to',
                        'INPUT_VALUE' => '',
                        'INPUT_VALUE_FINISH' => '',
                        'SHOW_TIME' => 'Y',
                        'HIDE_TIMEBAR' => 'N',
                        'INPUT_ADDITIONAL_ATTR' => 'placeholder="дд.мм.гггг чч:мм:сс"'
                    )
                );
                ?>
</code>
            </div>
        </div>
        <div class="modal-footer">
            <h3>Тест footer</h3>
        </div>
    </div>

Если у модального окна убрать атрибут tabindex="-1", то в календаре можно будет проставить время вручную(в инпут можно будет кликнуть), а если атрибут tabindex="-1" оставить, то в инпут уже невозможно будет кликнуть.
Почему так? Как tabindex="-1" влияет на инпут?
Модальное окно использую из bootstrap 2

Answer 1

[Ekaterina Sava]

Вы понимаете, что такое табиндекс и зачем он нужен? Этот атрибут определяет последовательность перехода между элементами при нажатии на кнопку Tab. Соответственно, при значении -1 такой элемент будет игнорироваться.
Так для чего он у вас установлен? Чтобы пользователь не мог ничего написать сам в этом инпуте?
Для этого есть:
1). Атрибут disabled - блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом.
2). Атрибут readonly - когда к тегу добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий.

Comments

[KOPC1886]

Ekaterina Sava tabindex установлен для модального окна, а не для инпута. Такая верстка по документации в самом bootstrap) Я оттуда и скопировал верстку модального окна

[Ekaterina Sava]

>> Этот атрибут определяет последовательность перехода между элементами при нажатии на кнопку Tab. Соответственно, при значении -1 такой элемент будет игнорироваться.

[Ekaterina Sava]

Вы спросили - Как tabindex="-1" влияет на инпут?
Я написала вроде бы исчерпывающий ответ. Если этого до сих пор недостаточно - сформулируйте нормально вопрос, чего вы хотите? Заблокированный инпут внутри этого окна или вы хотите его разблокировать или может быть еще что-то?