html表单在特定输入上按Enter键时阻止提交[重复]

Posted 2023-03-05

【中文标题】html表单在特定输入上按Enter键时阻止提交[重复]

【英文标题】：html form prevent submit when hit enter on specific input [duplicate]

【发布时间】：2014-12-16 04:19:40

【问题描述】：

我有一个 html 表单，其中包含一些输入字段，其中一个输入字段是搜索字段，当我单击此搜索输入字段旁边的搜索按钮时，搜索结果将使用 ajax 从服务器返回，这是我想要的是为了防止当用户关注这个特定的搜索输入字段并按回车时提交表单。顺便说一句，我使用的是 AngularJS，所以解决方案可能与我认为的 JQuery 或纯 javascript 方式有点不同。可以吗？任何建议将不胜感激！

【参考方案1】：

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

function clickHandler(e)
  e.preventDefault();

您也可以使用button 代替提交按钮。

【讨论】：

这不会阻止所有提交吗？当用户关注此输入字段而不关注其他输入字段时，是否可以仅阻止表单提交？顺便说一句，我用的是angularJS，我应该把这段代码放在哪里？

也许只在该输入框的按键事件中这样做就可以了

你说得对，我没想到，谢谢！

如果你这样做，你还不如ng-click="doStuff(); $event.stopPropagation()"

@Pylinux 我将如何覆盖默认行为“提交”来调用函数？

【参考方案2】：

使用如下函数：

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 HERE

【讨论】：

是的，对于 angularJS，我只需将 onKeyDown 更改为 ng-keydown，就可以了！谢谢！

【参考方案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;