如何限制回車鍵只有一個按鈕在一個窗體中有兩個提交按鈕

Question

我有一個HTML form有兩個提交類型輸入按鈕與不同的動作連接。表單應該在點擊任何這些按鈕時提交。但是在輸入按鍵,button-B應該會觸發提交。現在，因爲我有button-A在之上button-B in order，button-A正在觸發輸入按下。

請注意，在我的情況下，不能更改按鈕的順序。

我的代碼是這樣的，

<form method="POST" action="someAction"> 
    <input type="text" name="fName"/> 
    <input type="text" name="lName"/> 
    <input type="submit" value="Action-A" name="button-A"/> 
    <input type="submit" value="Action-B" name="button-B"/> 
</form> 

Answer 1

您可以添加偵聽所有的輸入和當用戶按下回車鍵，你可以通過使用e.preventDefault()防止默認動作。然後選擇第二個提交按鈕並單擊它。

<script> 
window.onload = function() { 
    //Select all of input in #form1 of type text 
    var inputs = document.querySelectorAll("#form1 > input[type=text]"); 
    for(var i = 0; i < inputs.length; i++) { 
     //Add listeners 
     inputs[i].addEventListener("keypress", function(e) { 
      var key = e.which || e.keyCode; 
      //Check if enter is pressed 
      if(key == 13) { 
       //Prevent from submitting with A 
       e.preventDefault(); 
       //Click B 
       document.getElementById('b').click(); 
      } 
     }, false); 
    } 
} 
</script> 

<form id="form1" method="POST" action="someAction"> 
<input type="text" name="fName"/> 
<input type="text" name="lName"/> 
<input type="submit" value="Action-A" name="button-A"/> 
<input type="submit" value="Action-B" id="b" name="button-B"/> 
</form>