HTML DOM tabIndex 属性
JavaScript基础 2022-06-08 16:00:13小码哥的IT人生shichen
HTML DOM tabIndex 属性
定义和用法
tabIndex 属性可设置或返回按钮的 tab 键控制次序。
语法
buttonObject.tabIndex=tabIndex
实例
下面的例子将返回按钮的 tab 键控制次序:
<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var b1=document.getElementById('b1').tabIndex;
var b2=document.getElementById('b2').tabIndex;
var b3=document.getElementById('b3').tabIndex;
document.write("Tab index of Button 1: " + b1);
document.write("<br />");
document.write("Tab index of Button 2: " + b2);
document.write("<br />");
document.write("Tab index of Button 3: " + b3);
}
</script>
</head>
<body>
<form>
<input type="button" id="b1" tabIndex="1" value="Button 1" />
<br />
<input type="button" id="b2" tabIndex="2" value="Button 2" />
<br />
<input type="button" id="b3" tabIndex="3" value="Button 3" />
<br />
<input type="button" onclick="showTabIndex()"
value="Show tabIndex" />
</form>
</body>
</html>
TIY
完整实例【显示按钮的 tab 控制次序】:
<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var b1=document.getElementById('b1').tabIndex;
var b2=document.getElementById('b2').tabIndex;
var b3=document.getElementById('b3').tabIndex;
document.write("Tab index of Button 1: " + b1);
document.write("<br />");
document.write("Tab index of Button 2: " + b2);
document.write("<br />");
document.write("Tab index of Button 3: " + b3);
}
</script>
</head>
<body>
<form>
<input type="button" id="b1" tabIndex="1" value="Button 1" />
<br />
<input type="button" id="b2" tabIndex="2" value="Button 2" />
<br />
<input type="button" id="b3" tabIndex="3" value="Button 3" />
<br />
<input type="button" onclick="showTabIndex()"
value="Show tabIndex" />
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html