Индекс вкладки на div

Пожалуйста, посмотрите HTML-код формы ниже

<form method="post" action="register">      
    <div class="email">
        Email   <input type="text" tabindex="1" id="email" value="" name="email">                   </div>
    </div>
    <div class="agreement">
        <div tabindex="2" class="terms_radio">
            <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
                <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
            </div>
        </div> 
    </div>
    <div class="form_submit">
        <input type="button" tabindex="3" value="Cancel" name="cancel">
        <input type="submit" tabindex="4" value="Submit" name="submit">         
    </div>
</form>

Здесь я стилизовал флажок соглашения таким образом, что радио-ввод полностью скрыт, а фоновое изображение применяется к div-оболочке, а нажатие на div-оболочку будет переключать фоновое изображение, а также проверенный статус радио-входа.

Мне нужно установить индекс tabindex в DIV 'terms_radio', просто атрибут tabindex = "2" в div не работает,

Можно ли поднять пунктирную границу на этикетке для ввода радио при нажатии TAB, когда курсор находится в поле ввода электронной почты?


input html radio-button label tabindex
person Mithun Sreedharan    schedule 17.06.2010    source источник

Ответы (4)


arrow_upward
34
arrow_downward

Элементы DIV несовместимы с tabindex (в HTML4).

(ПРИМЕЧАНИЕ спецификация HTML 5 допускает это, однако, как правило, работает независимо)

Следующие элементы поддерживают атрибут tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT и TEXTAREA.

По сути, все, что вы ожидаете от способности удерживать фокус; элементы формы, ссылки и т. д.

Я думаю, вы, вероятно, захотите здесь использовать немного JS (я бы порекомендовал jQuery для чего-то относительно безболезненного) для привязки к событию фокуса на входном элементе и установки границы родительского div.

Прикрепите это внизу тега body, чтобы получить jQuery из Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Тогда что-то вроде этого, вероятно, поможет:

$(function() {
    $('div.radio input').bind({
        focus : function() {
            $(this).closest('div.radio').css('border','1px dotted #000');
        },
        blur : function() {
            $(this).closest('div.radio').css('border','none');
        }
    });
});
person antz29    schedule 21.06.2010
comment
Согласно спецификации HTML4, правильно, но согласно спецификации HTML5 (см. dev.w3.org/html5/spec-author-view/ и dev.w3.org/html5/spec-author-view/index.html#attributes-1) и на практике , tabindex можно применять к другим элементам, - person Paul D. Waite; 22.03.2012
comment
Этот ответ действительно нуждается в обновлении, чтобы отразить HTML5 или отметить здесь другой ответ как правильный. - person cirrus; 09.09.2014
comment
tabindex = 0 помогло мне. Но когда он фокусирует div, я не могу нажать на него клавишей Enter. Щелчок мышью работает. Любая идея? - person vissu; 29.03.2017

arrow_upward
16
arrow_downward

Да! Для него есть спецификация, она называется WAI-ARIA и ее доступность: https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

person hdf54d56    schedule 20.10.2012
comment
Я добавил tabindex в div, и браузер перешел к нему в ожидаемом порядке. - person josephdpurcell; 16.08.2013

arrow_upward
5
arrow_downward

Вы можете просто изменить значение tabindex с 2 на 0.

<div tabindex="0" class="terms_radio">

Это обеспечивает состояние фокуса по умолчанию, которое соответствует потоку вашего кода.

https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex

person Poshan Bastola    schedule 19.05.2016
comment
tabindex совместим с div - person nikhil84; 06.07.2017

arrow_upward
0
arrow_downward

Вы можете поместить tabindex = "2" для радиоэлемента и скрыть радиоэлемент (не с display: none, а с z-index, чтобы он оставался вкладываемым). Когда вы нажимаете вкладку в поле ввода электронной почты, радио получает фокус, и вы можете использовать

input:focus+label {}

стилизовать этикетку

person StackExploded    schedule 20.11.2014