將光標移動到下一個文本字段按輸入

我的表單中有多個文本字段，我希望當用戶在一個文本字段中輸入數據並按下回車鍵，光標移動到當前文本字段旁邊的另一個文本字段。我訪問了一些問題，但沒有發現它們有用。將光標移動到下一個文本字段按輸入

$("#username").keypress(function (event) { 
    alert("inside function"); 
    if(event.keyCode == 13) { 
     textboxes = $("input.username"); 
     debugger; 
     currentBoxNumber = textboxes.index(this); 
     if (textboxes[currentBoxNumber + 1] != null) { 
      nextBox = textboxes[currentBoxNumber + 1]; 
      nextBox.focus(); 
      nextBox.select(); 
      event.preventDefault(); 
      return false; 
     } 
    } 
});

這是我的代碼，我已經試過，當去年的文本字段中輸入的數據，那麼表格將在鼠標單擊提交按鈕不進入新聞界的其他事情。

來源

2014-04-04 Engineer

@Teemu不工作我累:( – Engineer

這應該工作：

$(".username").keyup(function (event) { 
    if (event.keyCode == 13) { 
     textboxes = $("input.username"); 
     currentBoxNumber = textboxes.index(this); 
     if (textboxes[currentBoxNumber + 1] != null) { 
      nextBox = textboxes[currentBoxNumber + 1]; 
      nextBox.focus(); 
      nextBox.select(); 
     } 
     event.preventDefault(); 
     return false; 
    } 
});

ENTER在所有瀏覽器中都不會觸發keypress，而是使用keyup代替。還附加eventlistener到每個input而不是一個包裝。

A live demo at jsFiddle。

您與事件委託代碼也將略有變化的工作：在上面的句子

currentBoxNumber = textboxes.index(event.target);

this將引用包裝，而不是input，event.target指觸發事件的實際元素。

A live demo at jsFiddle。

來源

2014-04-04 04:52:51 Teemu

您的JS代碼和小提琴是工作，但我也希望我的表單不會提交併按Enter鍵鍵beacue當我按下回車鍵移動到下一個textfield我的表單將提交我將如何防止這種情況 – Engineer

在任何情況下，在鍵入處理程序中返回'false'請參閱編輯 – Teemu

我剛剛在Linux上的Firefox 44.0上嘗試了這一操作，發現表單提交會觸發keydown，這意味着提交事件在keyup事件發生之前觸發，將焦點前移到下一個字段有機會觸發。將keyup更改爲keydown可以解決問題。還沒有做過任何其他跨瀏覽器測試。 –

試試這個，只要你按下它會移動到下一個輸入字段的形式，當它到達提交按鈕將提交表單

  <html> 
    <head> 
     <title></title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script type='text/javascript'> 
     $(document).ready(function(){ 
      $('#myForm input').keydown(function(e){ 
      if(e.keyCode==13){  

       if($(':input:eq(' + ($(':input').index(this) + 1) + ')').attr('type')=='submit'){// check for submit button and submit form on enter press 
       return true; 
       } 

       $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus(); 

       return false; 
      } 

      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <form action="" id="myForm" > 
     <input type='text' name='firstField'> 
      <input type='text' name='secondField'> 

      <input type='text' name='secondField'> 

      <input type='text' name='secondField'> 
     <input type='submit'> 
     </form> 
    </body> 
    </html>

來源

2014-04-04 04:52:31 sanjeev

$(document).ready(function() { 

    $('input:text:first').focus(); 

    $('#txtLoginID').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtLoginID').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtPassword').focus(); 

      } 
     } 
    }); 


    $('#txtPassword').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtPassword').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtFirstName').focus(); 

      } 
     } 
    }); 

    $('#txtFirstName').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtFirstName').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtLastName').focus(); 

      } 
     } 
    }); 

    $('#txtLastName').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtLastName').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtPhoneNo').focus(); 

      } 
     } 
    }); 


    $('#txtPhoneNo').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtPhoneNo').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtEmailID').focus(); 

      } 
     } 
    }); 

    $('#txtEmailID').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtEmailID').val() == "") { 
       return false; 
      } 
      else { 
       $('#txtAddress').focus(); 

      } 
     } 
    }); 

    $('#txtAddress').keypress(function (e) { 
     if (e.keyCode == 13) { 

      if ($('#txtAddress').val() == "") { 
       return false; 
      } 
      else { 
       $('#btnSignUp').focus(); 

      } 
     } 
    }); 

you can do for text ,password,textarea its a long process but no confusion

來源

2017-02-22 09:03:15

**This code was perfectly worked in cursor move to next contenteditable td and textboxes and dropdown list within td ,and datepicker within textbox by reference in class strong text** 

    `var $input = $('.EnterlikeTab'); 
     $input.bind('keydown', function (e) { 
      if (e.which == 13) { 
       e.preventDefault(); 
       var nxtIdex = $input.index(this) + 1; 
       $(".EnterlikeTab:eq(" + nxtIdex + ")").focus(); 
      } 
     });`

來源

2017-07-15 13:01:58

將光標移動到下一個文本字段按輸入

回答

相關問題