@KOPC1886

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

<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
  • Вопрос задан
  • 3608 просмотров
Пригласить эксперта
Ответы на вопрос 1
EkaterinaSava
@EkaterinaSava
Frontend-developer // LoL-addicted // Geek
Вы понимаете, что такое табиндекс и зачем он нужен? Этот атрибут определяет последовательность перехода между элементами при нажатии на кнопку Tab. Соответственно, при значении -1 такой элемент будет игнорироваться.
Так для чего он у вас установлен? Чтобы пользователь не мог ничего написать сам в этом инпуте?
Для этого есть:
1). Атрибут disabled - блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом.
2). Атрибут readonly - когда к тегу добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы