关于JavaScript控制页面tab顺的问题

设置tabIndex属性
直接百度找下tabIndex就有你要的答案

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我有一个关于JavaScript控制tab顺的问题，请高人帮忙解决一下。在一个画面里有如下控件：
textbox1，textbox2，textbox4，textbox5，textbox7，textbox8
radioA我想实现的功能是：
当按tab 键时候的顺序是
textbox1⇒textbox2⇒radioA ⇒textbox4⇒textbox5⇒radioA ⇒textbox7⇒textbox8⇒radioA也就是说radioA的tabindex是要用JavaScript来控制的。我写的代码如下，但是却实现不了这个功能，请高手帮帮忙。
    <script type="text/javascript">
function changeTab(codekey,flg) {
if (codekey == "9") {
if (flg == "2") {
document.all.radioA.tabindex = "3";
}else if (flg == "5") {
document.all.radio1.tabindex = "6";
}else if (flg == "8") {
document.all.radioA.tabindex = "9";
}
}
}
    </script>
    <table>
     <tr>
     <td>
     <input type="text" name="text1" tabindex="1">
     </td>
     <td>
     <input type="text" name="text4" tabindex="4">
     </td>
     <td>
     <input type="text" name="text7" tabindex="7">
     </td>
     </tr>
     <tr>
     <td>
     <input type="text" name="text2" tabindex="2" onkeydown="changeTab(event.keyCode,2);">
     </td>
     <td>
     <input type="text" name="text5" tabindex="5" onkeydown="changeTab(event.keyCode,5);">
     </td>
     <td>
     <input type="text" name="text8" tabindex="8" onkeydown="changeTab(event.keyCode,8);">
     </td>
     </tr>
     <tr>
     <td rowspan="3">
     <input type="radio" name="radioA" id="radio1" tabindex="3">
     </td>
     </tr>
    </table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
</head>
<INPUT TYPE="text" value="1" tabindex="1">
<INPUT TYPE="text" value="4" tabindex="4">
<INPUT TYPE="text" value="3" tabindex="3">
<INPUT TYPE="text" value="2" tabindex="2"> <p>连续按 "Tab",可以改变焦点的位置.遍历的顺序是1-2-3-4.</p>
</body>
</html>
首先
event.keyCode ==9
其次
document.all.radio1//document.all.radioA
非常对不起，公司发贴有关键字限制（ T M D什  么关键字我也不知道），因此，发的有点乱。TO：s_liangchao1s
非常感谢，但是，我也动态的。
有一点迷糊，你是说radioA的位置是变的？
TO:s_liangchao1s
你说的问题是我发贴得时候，改错的，但是还是不好用呀！
<table>
    <tr>
    <td>
    <input type="text" name="text1" tabindex="1" value="1">
    </td>
    <td>
    <input type="text" name="text4" tabindex="4" value="4">
    </td>
    <td>
    <input type="text" name="text7" tabindex="7" value="7">
    </td>
    </tr>
    <tr>
    <td>
    <input type="text" name="text2" tabindex="2" onkeydown="changeTab(event.keyCode,2);" value="2">
    </td>
    <td>
    <input type="text" name="text5" tabindex="5" onkeydown="changeTab(event.keyCode,5);" value="5">
    </td>
    <td>
    <input type="text" name="text8" tabindex="8" onkeydown="changeTab(event.keyCode,8);" value="8">
    </td>
    </tr>
    <tr>
    <td rowspan="3">
    <input type="radio" name="radioA" id="radio1" tabindex="3">
    </td>
    </tr>
    </table>
  <script type="text/javascript">
function changeTab(codekey,flg) {
if (codekey == "9") {
if (flg == "2") {
document.all.radioA.tabIndex = "3";
}else if (flg == "5") {
document.all.radioA.tabIndex = "6";
}else if (flg == "8") {
document.all.radioA.tabIndex = "9";
}
}
}
    </script>
不是位置，只是tab顺变化
位置不变
楼主的主要问题就是js访问属性用camel的格式
tabIndex大小写问题
TO:s_liangchao1s
非常感谢，问题解决了，原来是tabIndex的I必须大写。请问一下，“camel的格式”是什么呀？
就是一种命名规则首字母小写其余字母大写网上查下
比如你访问元素style属性
obj.style.backgroundColor
还有一个问题就是你的html已经是定好的，你使用JS并没有改变head状态，他虽然把radioA的值改变了，但实际上你只是改变了值，对于tab事件来说，这样是不起作用的
可以用焦点事件做，
当textbox2的聚焦时，radioA.tabindex = textbox2.tabindex + 1;
其他同理