HTML - 按下輸入文本字段設置焦點在其他文本字段

Question

我想用3個文本框和1個按鈕在HTML中創建一個表單。在加載頁面或刷新時，txt1文本框會自動聚焦，當按下回車鍵時，txt2將被聚焦，如果按下再次輸入，則txt3將被聚焦，當按下時再次輸入它將提交。

有沒有人知道它該怎麼做？請幫助...下面的代碼示例...

感謝...

<form name="form1" action="filename.php" method="post"> 
 
text1: <input type="text" name="txt1" autofocus><br> 
 
text2: <input type="text" name="txt2"><br> 
 
text3: <input type="text" name="txt3><br> 
 
<input type="submit"> 
 
</form>

Answer 1

您可以用HTML和jQuery的組合做到這一點：

HTML：

<form name="form1" action="filename.php" method="post"> 
    text1: <input type="text" id="txt1" name="txt1" autofocus><br> 
    text2: <input type="text" id="txt2" name="txt2"><br> 
    text3: <input type="text" id="txt3" name="txt3"><br> 
     <input type="submit" /> 
</form> 

jQuery：

$(document).ready(function(){ 
    $('input').on('keypress', function(e) { 
     if(e.which == 13) {   
      switch($(this).attr('id')){ 
       case 'txt1': 
        $('#txt2').focus(); 
        e.preventDefault(); 
        break; 
       case 'txt2': 
        $('#txt3').focus(); 
        e.preventDefault(); 
        break; 
      }   
     } 
    }); 
}); 

演示：https://jsfiddle.net/s4r6a1qo/3/