Question

我有一个HTML form，其中有两个提交类型输入按钮，附加了不同的操作。单击任何这些按钮即可提交表单。但在输入键按时，按钮-B 应触发提交。现在，当我在订单中按钮-B 之上按钮-A 时，按钮-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

您可以向所有输入添加侦听器，当用户按Enter键时，您可以使用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>

如何将输入键按下限制为只有一个具有两个提交按钮的表单中的按钮

1 个答案: