Question

不使用JQuery
按Tab键时如何旋转HTML元素？
例如
以这种形式

<form>
    Field 1: <input type="text" id="field1" tabindex=1 /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>

当用户连续按Tab键时重点项目将是 field1 - ＆gt; field2 - ＆gt; field3 - ＆gt; field4 - ＆gt; field1 - ＆gt; field2 - ＆gt; field3 - ＆gt; field4 - ＆gt; field1 - ＆gt; ...
等等

Answer 1

试试这个 AFTER field4：

<script type="text/javascript">
var myInput = document.getElementById("field4");
if(myInput.addEventListener ) {
    myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

function keyHandler(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        if(e.preventDefault) {
            e.preventDefault();
        }
        document.getElementById('field1').focus();
        return false;
    }
}
</script>

Answer 2

首先，我要感谢社区。这是我多年来从你们那里获得答案后的第一份贡献。

昨天我正在寻找一些如何做到这一点的例子。最后，我根据箭头导航创建了自己的代码，因为正如JaredMcAteer所指出的，由于可访问性原因，tabbing不应在列表内旋转，而是跳转到活动元素的总索引。在这里你可以找到代码。希望它对某人有所帮助。

＆＃13;
＆＃13;
$('[role="menu"] li:first-child a').focus(); $('[role="menu"] a').keydown(function(e){ var myIndex = $(this).parent().index(); var mySibling = $(this).parents('[role="menu"]').children(); var first = mySibling[0]; var last = mySibling.get(-1); if (e.which === 38 || e.keyCode === 38){ e.preventDefault(); var prev = mySibling[myIndex - 1]; if(prev){ $(prev).children('a').focus(); }else { $(last).children('a').focus(); } } if (e.which === 40 || e.keyCode === 40){ e.preventDefault(); var next = mySibling[myIndex + 1]; if(next){ $(next).children('a').focus(); }else { $(first).children('a').focus(); } } });
＆＃13;
.menu ul { margin: 0; padding: 0.313rem; background: #ccc; opacity: 1; } .menu li { display: block; } .menu li a { display: block; position: relative; width: 100%; padding: 0.313rem; text-decoration: none; } .menu ul li:nth-last-child(n+2) { border-bottom: solid 1px #fff; } .menu ul a:hover, .menu ul a:focus { background: #fff; border: 0; outline: 0; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul class="menu" role="menubar"> <li role="menuitem"><a href="#target22" title="" class="settingsIcon">nav Item</a> <ul id="target22" role="menu"> <li role="menuitem" class="active"><a href="#menu1" title="">First Menu Item of the menu collection</a></li> <li role="menuitem"><a href="#menu2" title="">Menu Item</a></li> <li role="menuitem"><a href="#menu3" title="">Menu Item</a></li> </ul> </li> </ul> </nav>
＆＃13;
＆＃13;
＆＃13;

Answer 3

选项卡应在所有现代浏览器中旋转表单元素。您可以使用html5 autofocus属性强制光标在列表中的第1项上自动对焦。这是一个example

<强> HTML

<form>
    Field 1: <input type="text" id="field1" tabindex=1  autofocus="autofocus" /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>

@JaredMcAteer绝对正确，因为使用自动对焦会降低用户体验，特别是那些具有辅助功能的用户。请考虑到这一点。

Answer 4

我找到了另一种方法。给表格中的最后一个div或其他任何内容提供tabindex，然后当它获得焦点时，只需将焦点移动到表单上的第一个元素即可。我没有在我的字段上设置明确的tabindex，因此使用tabindex = 0可以工作。

var $last = $(".ok-cancel");
$last.attr("tabindex", "0");
$last.on("focus", function(){ ... move focus to first field ... }));

这样做的好处是，您不需要知道表单上除了第一个输入之外还有什么（如果需要，您可以自动发现）。

PS：我知道问题是没有jQuery，但这就是我的代码所在。

按Tab键时如何旋转HTML元素？

4 个答案: