按回车键自动跳到下一个文本框
博客专区 > caiyezi 的博客 > 博客详情
按回车键自动跳到下一个文本框
caiyezi 发表于2年前
按回车键自动跳到下一个文本框
  • 发表于 2年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

文本框如下:

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

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 108
码字总数 0
×
caiyezi
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: