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

最新推荐文章于 2024-05-28 15:47:14 发布

hi_kevin

最新推荐文章于 2024-05-28 15:47:14 发布

阅读量9.5k

点赞数

分类专栏： web前端文章标签： class function input firefox

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

例子：

<html>
<head>
<script src="jquery-1.4.4.js"></script>
<script>
$(document).ready(function(){
$("#testDiv :input[class='testClass']").keypress(function(e) {
  var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
  alert(keyCode);
  if (keyCode == 39) // 判断所按是否方向右键
   {
    keyCode == 9;
   }
   if (keyCode == 13) // 判断所按是否回车键 FireFox下事件的keyCode 是只读的，不能修改
   {
    keyCode == 9;
    var inputs = $("#testDiv :input[class='testClass']"); // 获取表单中的所有输入框
    var idx = inputs.index(this); // 获取当前焦点输入框所处的位置

    if (idx == inputs.length - 1) // 判断是否是最后一个输入框
    {
     return false;// 取消默认的提交行为
    } else {
     inputs[idx + 1].focus(); // 设置焦点
     inputs[idx + 1].select(); // 选中
    }
    return false;// 取消默认的提交行为
   }
  });
})

</script>

</head>
<body>
<div id="testDiv">
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
  <input class="testClass" value="" name="test1" /><br>
</div>
</body>
</html>

hi_kevin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
按回车键自动跳转到下一个文本框

例子：$(document).ready(function(){$("#testDiv :input[class='testClass']").keypress(function(e) { var keyCode = e.keyCode ? e.keyCode : e.whic
复制链接

扫一扫