HTML表单：在特定输入框中按下回车键时阻止提交

Question

我有一个包含一些输入字段的HTML表单，其中一个输入字段是搜索字段。当我单击该搜索输入字段旁边的搜索按钮时，会使用ajax从服务器返回搜索结果。我想要的是，在用户聚焦在此特定搜索输入字段并按下回车键时，防止表单提交。顺便说一句，我正在使用AngularJS，因此解决方案可能与JQuery或纯JavaScript方式略有不同。这可行吗？欢迎提供任何建议！

- dulan

Answer 1

使用以下函数：

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


 if(!e) var e = window.event;

 e.cancelBubble = true;
 e.returnValue = false;

 if (e.stopPropagation) {
  e.stopPropagation();
  e.preventDefault();
 }
}

<form name="input" action="http://www.google.com" method="get">
<input type="text" onkeydown="doNothing()">
<br><br>
<input type="submit" value="Submit">
</form> 

点击这里查看 JSFIDDLE

- Drazzah

---

是的，对于AngularJS来说，我所需要做的就是将onKeyDown更改为ng-keydown，没错！谢谢！ - dulan

Answer 2

在按钮的点击处理程序中执行 e.preventDefault()。

function clickHandler(e){
  e.preventDefault();
}

你可以使用一个按钮代替提交按钮。

- TGH

---

这不会阻止所有提交吗？是否可能只在用户聚焦于该输入字段而不是其他字段时阻止表单提交？顺便说一下，我正在使用AngularJS，在哪里应该放置这段代码？ - dulan

也许在该输入框的keypress事件中执行它会起作用。 - TGH

你说得对，我没有仔细考虑，谢谢！ - dulan

如果你正在这样做，那么最好做 ng-click="doStuff(); $event.stopPropagation()"。 - Pylinux

@Pylinux，如何重写默认行为“用于提交”的方式，以调用函数代替？ - crazyCoder

Answer 3

When you submit form using enter key on particular text fields or submit button(focus). 
To prevent form submit twice, we can use both approach

1.
define  var isEnterHitOnce=true globally which loaded at the time of form load

on keyPress Event or on submitForm()

if(event.keycode==13 && isEnterHitOnce){
isEnterHitOnce=false;
//Process your code. Sent request to server like submitForm();
}
isEnterHitOnce=false;


2. 
disable the field object from where you received the action like
beginning of method in formSubmit()
    document.getElementById(objName).disabled=true; // objName would be your fields name like submitButton or userName


//At the end of method or execution completed enable the field
    document.getElementById(objName).disabled=false;

- Vineet Jain