js实现input输入框按回车键后光标跳到下一个输入框

摘要：在html页面中有多个input 输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。

在html页面中有多个input 输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。

1.原生Js实现：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <script type="text/javascript">
      function focusNextInput(thisInput){
          var inputs = document.getElementsByTagName("input");
          for(var i = 0;i<inputs.length;i++){
            // 如果是最后一个，则焦点回到第一个
            if(i==(inputs.length-1)){
              inputs[0].focus();
              break;
            }else if(thisInput == inputs[i]){
              inputs[i+1].focus();
              break;
            }
          }
      }  
    </script>
  </head>
<body>
  <table>
    姓名：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
    年龄：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
    工号：<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">
  </table>
</body>
</html>

2.Jquery实现：

/**
 * 回车时跳转到下一个元素
 * @Author   HTL
 * @DateTime  2016-12-30T11:33:25+0800
 * @param     {[type]}                 $input [INPUT 元素列表]
 * @return    {[type]}                        [description]
 */
function keydown_to_tab($input){
  if(!$input) $input = $('input:text:not(:disabled)');
  $input.bind("keydown", function(e) {
    var n = $input.length;
    if (e.which == 13){
          e.preventDefault(); //Skip default behavior of the enter key
          var nextIndex = $input.index(this) + 1;
          if(nextIndex < n)
              $input[nextIndex].focus();
          else
              $input[nextIndex-1].blur();
    }
  });
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_434