HTML DOM tabIndex 属性
JavaScript基础 2022-06-08 16:10:00小码哥的IT人生shichen
HTML DOM tabIndex 属性
定义和用法
tabIndex 属性可设置或返回 checkbox 的 tab 键控制次序。
语法
checkboxObject.tabIndex=number实例
下面的例子可更改 checkbox 的 tab index：
<html>
<head>
<script type="text/javascript">
function changeTabIndex()
{
document.getElementById('check3').tabIndex="1"
document.getElementById('check1').tabIndex="3"
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="check1" tabIndex="1" /><br />
<input type="checkbox" id="check2" tabIndex="2" /><br />
<input type="checkbox" id="check3" tabIndex="3" /><br />
<input type="button" onclick="changeTabIndex()" value="Change tabIndex" />
</form>
</body>
</html>TIY
完整实例【更改 checkbox 的 tab 键次序】：
<html>
<head>
<script type="text/javascript">
function changeTabIndex()
{
document.getElementById('check3').tabIndex="1"
document.getElementById('check1').tabIndex="3"
}
</script>
</head>
<body>
<p>Try navigating the links on this page by
using your "tab" button on you keyboard</p>
<form><input type="checkbox" id="check1" tabIndex="1" /><br />
<input type="checkbox" id="check2" tabIndex="2" /><br />
<input type="checkbox" id="check3" tabIndex="3" /><br />
<input type="button" onclick="changeTabIndex()"
value="Change tabIndex" />
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
