防止按Enter键提交按钮

Question

我有两个按钮，一个id为enterToSubmit，另一个id为clickToSubmit。当用户按下回车键时，我想让“enterToSubmit”按钮提交表单而不是“clickToSubmit”按钮。

在同一页上，我有一个id为title的文本框，在页面加载时，我隐藏“enterToSubmit”按钮，直到用户在文本框中输入了某些内容，然后用户可以按Enter键提交表单。

如何防止在用户按下Enter键时，“clickToSubmit”按钮提交表单？

- ɹǝʞɐǝɹq-ʞɔɐʇs

Answer 1

很不幸，在HTML中无法更改“默认”提交按钮，它始终是第一个具有类型为submit/image的input/button元素。

虽然您可以尝试手动捕获Enter键按下事件，但这样做非常不可靠，因为Enter并不总是要提交表单，这取决于（a）哪个元素聚焦，（b）是否使用shift/ctrl+enter，（c）表单中有哪些其他元素，以及（d）使用的浏览器。如果您错过了某种情况，就会出现意外的默认提交；如果您遇到了不应该出现的情况，就会出现意外的enter提交。

因此，通常最好在表单中添加一个额外的按钮作为第一个提交按钮，以便控制表单的默认提交操作。如果您不想显示此按钮，则可以使用大负值的left值将其定位到页面的侧面上。 （这有点丑陋，但是通过display或visibility隐藏它会使其在某些浏览器中无法起作用。）

因此，也许您可以通过将enter-to-submit按钮推到看不见的页面位置来“隐藏”它，然后捕获它的单击事件来返回false并停止表单提交。

- bobince

Answer 2

如何防止 "clickToSubmit" 按钮在用户按下 Enter 键时提交表单？

尝试以下代码：

$("#clickToSubmit").on("keydown", function(e){
   if(e.keyCode === 13){
       e.preventDefault();
   }
});

- Sarfraz

Answer 3

    $('#formId').on('keyup keypress', function(e) {
          var keyCode = e.keyCode || e.which;
          if (keyCode === 13) { 
            e.preventDefault();
            return false;
          }
        });



Usually form is submitted on Enter when you have focus on input 
elements.
We can disable Enter key (code 13) on input elements within a form.

同样地，在一些较新版本的Firefox浏览器中，表单提交未被阻止，因此将keypress事件添加到表单中会更安全。

- AVISHEKKT47

---

这段代码的一些解释可能会有益处。 - Pyves

Answer 4

    jQuery('#clickToSubmit').click(function(e){    
       if(e.keyCode==13){          
            e.preventDefault();
       }    
    });

- Praveen Prasad

Answer 5

首先，确保两个按钮都不是“submit”类型。现在，在这两个按钮上，您可以调用两个不同的JavaScript函数：enterToSubmit()和clickToSubmit()。请注意，在enterToSubmit()中读取按下的回车键：

if (e.keyCode === 13){ form.submit(); }

并调用form.submit()

而在clickToSubmit()中，则直接执行form.submit()。

- sushil bharwani

Answer 6

尝试使用以下代码来实现文本框输入

$j("#title").keypress(function(e1){
   if(e1.keyCode==13){          // if user is hitting enter
       return false;
   }
});

提交按钮

$j("#clickToSubmit").submit(function(e1){
   if(e1.keyCode==13){          // if user is hitting enter
       return false;
   }
});

- Chinmayee G