按回车键自动跳到下一个文本框
文本框如下:
<table id="table"> <tr> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> </tr> <tr> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> </tr> <tr> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td> </tr> </table>
添加回车事件&方向事件(上下左右):
function changeTab(event,i){ var keyCode = event.keyCode; var inputs = jQuery("#table :input"); // 获取表单中的所有输入框 var idx = inputs.index(i); switch(keyCode){ case 13: inputs[idx + 3].focus(); // 设置焦点 inputs[idx + 3].select(); // 选中 break; case 37: //← inputs[idx - 1].focus(); // 设置焦点 inputs[idx - 1].select(); // 选中 break; case 38: //↑ inputs[idx - 3].focus(); // 设置焦点 inputs[idx - 3].select(); // 选中 break; case 39: //→ inputs[idx + 1].focus(); // 设置焦点 inputs[idx + 1].select(); // 选中 break; case 40: //↓ inputs[idx + 3].focus(); // 设置焦点 inputs[idx + 3].select(); // 选中 break; default: break; } return true; }
作者:程序员小波与Bug
出处:https://codetrips.cn
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。如有问题,可以邮件:caiya928@aliyun.com
QQ:1419901425 联系我
如果喜欢我的文章,请关注我的公众号:程序员小波与Bug