首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >按回车键自动跳到下一个文本框

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

作者头像
用户1141560
发布于 2017-12-26 15:13:28
发布于 2017-12-26 15:13:28
2K0
举报
文章被收录于专栏:西安-晁州西安-晁州

文本框如下:

代码语言:javascript
复制
<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>

添加回车事件&方向事件(上下左右):

代码语言:javascript
复制
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;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-11-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档