这个代码哪里有问题吗??
alert也出来。就是event.which = 9; 不执行啊!!!!!!
1、event.which不能修改,貌似没办法自动触发键盘事件
2、建议用keyup,用keydown的话,若一直按着按键不放会一直触发这个事件
可以用以下方法解决你的问题
document.onkeyup = function(e) {
e = e || window.event;
if (e.keyCode == 13) {
var index = Number(document.querySelector('input:focus').getAttribute('tabindex'));
document.querySelector('input[tabindex="'+ (index+1) +'"]').focus();
}
}
你的代码运行时有没有报错?你下面这段代码拷去试试呢
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<table>
<tr>
<td><input type="text" tabindex="1"/></td>
<td><input type="text" tabindex="3"/></td>
<td><input type="text" tabindex="2"/></td>
</tr>
</table>
</body>
<script type="text/javascript">
document.onkeyup = function(e) {
e = e || window.event;
if (e.keyCode == 13) {
var index = Number(document.querySelector('input:focus').getAttribute('tabindex'));
index = index == 3 ? 1 : (index + 1);
document.querySelector('input[tabindex="'+ index +'"]').focus();
}
}
</script>
</html>
<div id="JianCeRiZhi-dialog" class="easyui-dialog"
style="width: 980; height: 660px; padding: 10px"
data-options="modal:true,closed:true,
buttons:[{
text:'确定',
iconCls:'icon-ok',
handler:JianCeRiZhiFormPost
},{
text:'取消',
iconCls:'icon-cancel',
handler:function(){
$('#JianCeRiZhi-dialog').dialog('close');
}
}]">
<form id="JianCeRiZhi_form" method="post" autocomplete="off">
<table>
<!-- <tr>
<td style="float: left">区县:</td>
<td style="float: left"><select id="JianCeRiZhi-combobox-qu"
class="easyui-combobox"
data-options="url:'JianCeGongZuoJiHua/Getjiancexinxi.action',
method:'get',
valueField:'quyu',
textField:'quyu',
editable:false,
required:true,
panelHeight:'auto',
onSelect:function(){
var varSelect = $('#JianCeRiZhi-combobox-qu').combobox('getText');
if(varSelect = varSelect){
$('#JianCeRiZhi-combobox-mingcheng').combobox('clear');
$('#JianCeRiZhi-combobox-mingcheng').combobox('reload','JianCeRiZhi/GetJianCeMC.action?quyu='+varSelect);
}
}"
name="quxian" style="width: 180px;">
</select></td>
<td style="float: left">监测点名称:</td>
<td style="float: left"><select
id="JianCeRiZhi-combobox-mingcheng" name="jiancedianmingcheng"
data-options="url:'JianCeRiZhi/GetJianCeMC.action',
method:'get',
valueField:'mingcheng',
editable:false,
required:true,
textField:'mingcheng',
panelHeight:'auto'"
class="easyui-combobox" style="width: 180px;"></select></td>
<td style="float: left">填报时间:</td>
<td style="float: left"><input
id="JianCeRiZhi-datebox-tianbaoshijian" name="tianbaoriqi"
readonly="readonly" style="width: 250px;"></td>
</tr>
<tr>
<td style="float: left">是否延期:</td>
<td style="float: left"><select
id="JianCeRiZhi-validatebox-SFYQ" class="easyui-combobox"
data-options="panelHeight:'50'" name="shifouyanqi"
style="width: 158px; listHeight: auto">
<option value="否">否</option>
<option value="是">是</option>
</select></td>
<td style="float: left">填报人: </td>
<td style="float: left"><input
id="JianCeRiZhi-validatebox-tianbaoren" name="tianbaoren"
readonly="readonly" data-options="required:true"
style="width: 120px;"></td>
</tr> -->
<tr>
<td style="float: left; color: red"><font>需要填报的数据表格如下:</font></td>
</tr>
<tr>
<td>
<div data-options="fit:true,border:20" style="height: auto;">
<span style="font-family: Verdana; font-size: 14px;">
<table border="1" cellspacing="0" bordercolor="#99ccff">
<tr>
<th colspan="1" width="100px" height="40px"></th>
<th colspan="4" style="width: 400px; text-align: center;">城镇</th>
<th colspan="2" style="width: 250px; text-align: center;">乡村</th>
<th colspan="3" style="width: 380px; text-align: center;">合计</th>
<th style="width: 200px; text-align: center;">备注</th>
</tr>
<tr height="40px">
<th> </th>
<th style="text-align: center;" colspan="2">男</th>
<th style="text-align: center;" colspan="2">女</th>
<th style="text-align: center;">男</th>
<th style="text-align: center;">女</th>
<th style="text-align: center;">男</th>
<th style="text-align: center;">女</th>
<th style="text-align: center;">合计</th>
<th style="text-align: center;"></th>
</tr>
<tr height="40px">
<th style="text-align: center;">组别</th>
<th style="text-align: center;">城镇体力</th>
<th style="text-align: center;">城镇非体力</th>
<th style="text-align: center;">城镇体力</th>
<th style="text-align: center;">城镇非体力</th>
<th style="text-align: center;" colspan="2"></th>
<th style="text-align: center;" colspan="3"></th>
<th style="text-align: center;"></th>
</tr>
<tr height="35px">
<td style="text-align: center;">3岁</td>
<td colspan="2"><input id="cnan3" tabindex="1" name="chengnan3"
class="easyui-numberbox"
style="width: 202px; height: 36px; text-align: center"></td>
<td colspan="2"><input id="cnv3" tabindex="2" name="chengnv3"
class="easyui-numberbox"
style="width: 202px; height: 36px; text-align: center"></td>
<td><input id="xnan3" tabindex="3" name="xiangnan3"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="xnv3" tabindex="4"name="xiangnv3"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="hnan3" tabindex="5" name="hejinan3" readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="hnv3" tabindex="6" name="hejinv3" readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="h33" tabindex="7" name="heji3" readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="3-8" tabindex="8" name="beizhu3"
style="width: 200px; height: 30px;"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">4岁</td>
<td colspan="2"><input id="cnan4" name="chengnan4"
class="easyui-numberbox"
style="width: 202px; height: 36px; margin-left: 0px; text-align: center"></td>
<td colspan="2"><input id="cnv4" name="chengnv4"
class="easyui-numberbox"
style="width: 202px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnan4" name="xiangnan4"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnv4" name="xiangnv4"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="hnan4" name="hejinan4" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="hnv4" name="hejinv4" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="h44" name="heji4" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="4-8" name="beizhu4"
style="width: 200px; height: 30px; margin-left: 0px"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">5岁</td>
<td colspan="2"><input id="cnan5" name="chengnan5"
class="easyui-numberbox"
style="width: 202px; height: 36px; margin-left: 0px; text-align: center"></td>
<td colspan="2"><input id="cnv5" name="chengnv5"
class="easyui-numberbox"
style="width: 202px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnan5" name="xiangnan5"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnv5" name="xiangnv5"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="hnan5" name="hejinan5" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="hnv5" name="hejinv5" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="h55" name="heji5" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="5-8" name="beizhu5"
style="width: 200px; height: 30px; margin-left: 0px"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">6岁</td>
<td colspan="2"><input id="cnan6" name="chengnan6"
class="easyui-numberbox"
style="width: 202px; height: 36px; margin-left: 0px; text-align: center"></td>
<td colspan="2"><input id="cnv6" name="chengnv6"
class="easyui-numberbox"
style="width: 202px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnan6" name="xiangnan6"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnv6" name="xiangnv6"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="hnan6" name="hejinan6" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="hnv6" name="hejinv6" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="h66" name="heji6" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="6-8" name="beizhu6"
style="width: 200px; height: 30px; margin-left: 0px"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">20岁~29岁</td>
<td><input id="cnanti20" name="chengnanti2029"
class="easyui-numberbox"
style="width: 100px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="cnanfei20" name="chengnanfei2029"
class="easyui-numberbox"
style="width: 100px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="cnvti20" name="chengnvti2029"
class="easyui-numberbox"
style="width: 100px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="cnvfei20" name="chengnvfei2029"
class="easyui-numberbox"
style="width: 100px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnan20" name="xiangnan2029"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="xnv20" name="xiangnv2029"
class="easyui-numberbox"
style="width: 125px; height: 36px; margin-left: 0px; text-align: center"></td>
<td><input id="hnan20" name="hejinan2029"
readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="hnv20" name="hejinv2029"
readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="h20" name="heji2029" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="20-10" name="beizhu2029"
style="width: 200px; height: 30px; margin-left: 0px;"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">30岁~39岁</td>
<td><input id="cnanti30" name="chengnanti3039"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnanfei30" name="chengnanfei3039"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvti30" name="chengnvti3039"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvfei30" name="chengnvfei3039"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="xnan30" name="xiangnan3039"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="xnv30" name="xiangnv3039"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="hnan30" name="hejinan3039"
readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="hnv30" name="hejinv3039"
readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="h30" name="heji3039" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="30" name="beizhu3039"
style="width: 200px; height: 30px;"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">40岁~49岁</td>
<td><input id="cnanti40" name="chengzhennanti4049"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnanfei40" name="chengzhennanfei4049"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvti40" name="chengzhennvti4049"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvfei40" name="chengzhennvfei4049"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="xnan40" name="xiangnan4049"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="xnv40" name="xiangnv4049"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="hnan40" name="hejinan4049"
readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="hnv40" name="hejinv4049"
readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="h40" name="heji4049" readonly="readonly"
style="width: 160px; height: 30px; margin-left: 0px; text-align: center"></td>
<td><input id="40" name="beizhu4049"
style="width: 200px; height: 30px; margin-left: 0px;"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">50岁~59岁</td>
<td><input id="cnanti50" name="chengzhennanti5059"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnanfei50" name="chengzhennanfei5059"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvti50" name="chengzhennvti5059"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvfei50" name="chengzhennvfei5059"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="xnan50" name="xiangnan5059"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="xnv50" name="xiangnv5059"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="hnan50" name="hejinan5059"
readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="hnv50" name="hejinv5059"
readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="h50" name="heji5059" readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="50" name="beizhu5059"
style="width: 200px; height: 30px;"></td>
</tr>
<tr height="35px">
<td style="text-align: center;">60岁~69岁</td>
<td><input id="cnanti60" name="chengzhennanti6069"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnanfei60" name="chengzhennanfei6069"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvti60" name="chengzhennvti6069"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="cnvfei60" name="chengzhennvfei6069"
class="easyui-numberbox"
style="width: 100px; height: 36px; text-align: center"></td>
<td><input id="xnan60" name="xiangnan6069"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="xnv60" name="xiangnv6069"
class="easyui-numberbox"
style="width: 125px; height: 36px; text-align: center"></td>
<td><input id="hnan60" name="hejinan6069"
readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="hnv60" name="hejinv6069"
readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="h60" name="heji6069" readonly="readonly"
style="width: 160px; height: 30px; text-align: center"></td>
<td><input id="60" name="beizhu6069"
style="width: 200px; height: 30px; editable: false"></td>
</tr>
</table>
</span>
</div>
</td>
</tr>
</table>
<input id="JianCeRiZhi_editMode" name="mode" style="display: none" />
</form>
</div>
<br> document.onkeyup = function(e) {<br> e = e || window.event;<br> if (e.keyCode == 13) {<br> alert(e.keyCode)<br> var index = Number(document.querySelector('input:focus').getAttribute('tabindex'));<br> alert(index)<br> document.querySelector('input[tabindex="'+ (index+1) +'"]').focus();<br> }<br> }</p>
虽然没解决你这个问题,但是我建议你的css样式不要直接写在标签上,很忌讳这样写
我把你代码拷下来,能执行。没有任何问题,你换个浏览器试试
document.onkeyup = function(e) {
e = e || window.event;
if (e.keyCode == 13) {
var index = Number(document.querySelector('input:focus').getAttribute('tabindex'));
document.querySelector('input[tabindex="'+ (index+1) +'"]').focus();
}
}