Вкладка Индекс на div - PullRequest
Новая
       29

Вкладка Индекс на div

31 голосов
/ 17 июня 2010

Пожалуйста, посмотрите форму 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 'term_radio', просто атрибут tabindex = "2" на div не работает,

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

Ответы [ 5 ]

30 голосов
/ 22 июня 2010

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

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

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

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

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

Поместите это внизу тега 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');
        }
    });
});
16 голосов
/ 20 октября 2012

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

4 голосов
/ 19 мая 2016

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

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

Это обеспечивает состояние фокуса по умолчанию, соответствующее потоку вашего кода.*https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex

0 голосов
/ 21 ноября 2014

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

input:focus+label {}

для оформления этикетки

0 голосов
/ 14 февраля 2014

jSFiDDLE 

$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

setTabindexLimit () атрибут функции два 10 , который является последним Tabindex в Div, и Selector_With_Where_Tab_Index_You_Want - это класс или идентификатор div, в котором вы хотите повторить tabindexto.

...