HTML tabindex problem

Я застрял здесь с проблемой tabindex. Как вы можете видеть в макете HTML, у меня есть четыре кнопки: «Добавить», «Вычесть», «Сохранить» и «Закрыть». Когда пользователь нажимает клавишу Tab, поток начинается правильно с Add-> Subtract-> Save-> Close, но после закрытия, если пользователь снова нажал клавишу Tab, фокус переходит в TD TAG с комментарием «Jumping Here». Я хочу, чтобы это было сделано, чтобы перейти к кнопке «Добавить». Я попытался дать всем кнопкам tabindex 1, 2, 3, 4, тогда я попытался дать каждой кнопке индекс и остальным местам как -1, но это тоже не решило проблему. Как решить эту проблему?HTML tabindex problem

http://jsfiddle.net/t3ch/aNxjy/

источник

2010-11-09 t0mcat

Это звучит, как вы пытаетесь запретить пользователю обходе по ссылкам и переключателей на этой странице. Если вы это сделаете, как кто-то без мыши (обычно кто-то с инвалидностью) должен получить к ним доступ? – AaronSieb

@ AaronSieb, Это только часть req.Независимо от потребностей бизнеса :) – t0mcat

иногда люди, которые делают запросы, понятия не имеют, о чем они говорят. – zzzzBov

Довольно уверен, что это не возможно. Просто потому, что у вас есть форма с значениями tabindex, это не значит, что это единственные элементы, которые получат фокус. Даже компоненты браузера, такие как адресная строка, в какой-то момент получат фокус. Браузер будет использовать указанный вами tabindex, но после этого табуляция будет проходить через все остальное.

источник

2010-11-09 16:11:35 stevelove

@stevelove, ну я просто разместил текущий поток. Я знаю, что браузер ставит собственный tabindex. Возможно, я должен перефразировать проблему, потому что, после закрытия botton, я хочу, чтобы фокус переместился к кнопке «Добавить». – t0mcat

Единственный способ сделать это - дать кнопке «Добавить» вкладку, которая появляется после кнопки «Закрыть». Например, Close: 'tabindex = 3' и Add:' tabindex = 4'. Но это означает, что ваш вкладка не будет запускаться в кнопке «Добавить». Вы не можете сделать вкладку этих элементов в круговом порядке, пропуская все остальное. – stevelove

Спасибо, Стив. Поэтому, даже если мы назначаем tabindex -1 для поля, он вообще не пренебрегает им вообще. правильно? – t0mcat

Не делайте этого, это ужасная идея.

Имейте объекты сфокусированного состояния (например, input), предшествующие первому и следуя последней кнопке в порядке табуляции. Скройте их (например, разместив их со стороны страницы с помощью position: absolute; left: -1000px;). Когда они получат фокусное событие, переместите фокус на кнопку на другом конце порядка вкладок.

Не делайте этого, это ужасная идея. В самом деле.

источник

2010-11-09 16:19:17 bobince

Мне не нравится эта идея, но способ, которым Вы могли бы этого достичь, регистрируя onblur событие для кнопки закрытия, затем установите фокус на то, что когда-либо контролировать вы хотите ...

Это делает работу .. ..

function resetFocusIndex(){ 
    var obj = document.getElementsByName('addIt'); 
    if(obj[0]) 
     obj[0].focus(); 
} 


<INPUT TYPE="button" tabindex = "1" VALUE="Close" NAME="closeIt" onblur="resetFocusIndex()">

UPDATE

<html> 
    <head> 
    <script> 

    function resetFocusIndex(){ 
     var obj = document.getElementsByName('addIt'); 
     if(obj){ 
     obj[0].focus(); 
     } 
    } 

    </script> 
    </head> 
    <body> 
    <TABLE WIDTH=95%> 
     <TR> 
     <TD><INPUT TYPE="button" tabindex = "1" id="test2" VALUE="Add" NAME="addIt"></TD> 
     <TD><INPUT TYPE="button" tabindex = "1" VALUE="Subtract" NAME="minusIt"></TD> 
     <TD> </TD> 
     </TR> 
    </TABLE> 

    <DIV> 
    <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1"> 
     <TD> </TD> 
     <TD>First</TD> 
     <TD>Second</TD> 
     <TD>Third</TD> 
     <TD>Fourth</TD> 
     <TR> 
    <!-- Jumping Here --> <TD><INPUT TYPE="radio" NAME="selected" tabindex = "-1" VALUE=""></TD>  
    <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled></TD> 
    <TD ></TD> 
    <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD> 
    <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD> 

     <INPUT TYPE="hidden" NAME="" VALUE=""> 
     <INPUT TYPE="hidden" NAME="" VALUE=""></TD> 
    </TR> 
    </TABLE> 
</DIV> 

<TABLE> 
    <TR> 
    <TD><A HREF="#" tabindex="-1">Click Here!</A></TD> 
    </TR> 
    <TR><TD>&nbsp;</TD></TR> 
    <TR> 
    <TD> 
    <INPUT TYPE="button" tabindex = "1" VALUE="Save" NAME="saveIt"> 
    <INPUT TYPE="button" tabindex = "1" VALUE="Close" id="test" NAME="closeIt" onblur="resetFocusIndex()"> 
    </TD> 
    </TR> 
</TABLE> 

</body> 

</html>

источник

2010-11-09 16:26:13 Gabe

Спасибо. Это будет работать, я думаю, и решить проблему тоже – t0mcat

@ t3ch, пожалуйста, отметьте это как ваш ответ, если она решит вашу проблему, и вы ее приняли. – Gabe

Привет, gmcalab, почему вы использовали obj [0]? Мы не можем получить массив? есть только одна кнопка с этим именем? – t0mcat

Сначала вам нужно «идентификаторы для кнопок, которые всегда хорошо.

Затем вам нужно установить два обработчика; один на последнем, чтобы перейти к первому, а один - к первой кнопке до shif + tab до последней.

Посмотрите: http://jsfiddle.net/aNxjy/11/.

Я использовал jquery, но вы можете выполнить это с помощью обычных js. Просто вам придется выполнять кросс-браузерную совместимость.

источник

2010-11-09 16:46:26

Вот код для чистой JS, только для Firefox. Обратите внимание, что это очень похоже на оригинал один: http://jsfiddle.net/aNxjy/12/. вы можете использовать события onkeydown или onkeyup, если onkeypress уже используется, но они возвращают разные вещи в объекте события. –

Ravindra, я не могу использовать jQuery и Браузер IE7/8 – t0mcat

Пройдя через ответ bobince выше, я теперь помню, как мы это делали. Были два элемента: один с tabindex 0 и другой с tabindex 32767. оба были удержаны с экрана, используя что-то вроде top: -9999px и в центре внимания этих элементов мы привыкли писать логику, чтобы перейти к ожидаемому первому или последнему элементу. Таким образом, мы никогда не трогаем обработчики нажатия клавиш фактических элементов самих себя. –

В дополнение к gmcalab Ответим вместо getElementsByName вы могли бы использовать getElementById

var obj = document.getElementById('test2'); 
if(obj){ 
    obj.focus(); 
}

или, возможно:

var obj = document.getElementById('test2'); 
if(obj){ 
    obj.select(); 
}

источник

2010-12-29 16:20:38 gman1984

HTML tabindex problem

ответ

Смежные вопросы