jQuery控制回車使表單內控件得到焦點

時間 2019-11-17

原文原文鏈接

$(function(){
       var length = $(":input").length;
       $(":input").keyup(function(e) {
       var key = e.which;
       if (13 == key) {
       var index = $(":input").index(this);
       var newIndex = index + 1;
       if(length == newIndex)
       {
            newIndex = 0;
       }
       $(":input:eq(" + newIndex + ")").focus();
       }
   });
});java

</script>
</head>
<body>
<form id="frm1">
           <input type="text" /><br/>
    <input type="text" /><br/>
    <select>
       <option>選項一</option>
       <option>選項二</option>
    </select>
    <br/>
    <input id="btn" type="button" value="提交" />
</form>
</body>jquery

注意點函數

①$(":input")表示表單內全部的控件，區別於$("input")只拿到input標籤，拿不到select等。
②index函數是jQuery中頗有用的一個函數。this

但實際狀況中咱們並不必定要循環得到焦點，當提交按鈕得到焦點的時候，咱們就提交表單。spa

$(function(){
    $(":input").keyup(function(e) {
     var key = e.which;
     if (13 == key) {
          var index = $(":input").index(this);
          var newIndex = index + 1;
          $(":input:eq(" + newIndex + ")").focus();
      }
   });orm

   $("#btn").click(function(){
       $("frm1").submit();
   });ip

});input