按回车键自动跳到下一个文本框

文本框如下:

<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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区