2

不使用 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 -> field2 -> field3 -> field4 -> field1 -> field2 -> field3 -> field4 -> field1 -> ...
以此类推

4

4 回答 4

1

在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>
于 2012-12-18T15:29:14.093 回答
1

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

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

$('[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();
			}
		}
	});
.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;
}
<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>

于 2017-10-06T11:54:40.000 回答
0

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

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 绝对正确，因为使用自动对焦会降低用户的体验，尤其是那些有可访问性问题的用户。请考虑到这一点。

于 2012-12-18T15:09:35.787 回答
0

我找到了另一种方法来做到这一点。给表单上的最后一个 div 或其他任何内容一个 tabindex，然后当它获得焦点时，只需将焦点移动到表单上的第一个元素。我没有在我的字段上设置明确的 tabindex，所以使用 tabindex=0 有效。

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

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

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

于 2013-01-18T07:36:42.090 回答