Answers:
您可以使用诸如
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
在阅读原始帖子的评论时,要使其更加有用,并允许人们在Enter完成所有字段后按下:
function validationFunction() {
$('input').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});
keydown
的document
,而不是window
为这个工作。
&& !$(document.activeElement).is('textarea')
条件,否则textarea内的换行符将被阻止(至少在IE中)。
如果您<textarea>
的表单中没有,则只需将以下内容添加到您的中<form>
:
<form ... onkeydown="return event.key != 'Enter';">
或使用jQuery:
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
这将导致将在窗体上检查每次按键key
。如果不是Enter
,则它将返回true
并且一切照常进行。如果为Enter
,则它将返回false
并且任何内容都将立即停止,因此不会提交该表单。
该keydown
事件优于keyup
作为keyup
是来不及块的形式提交。历史上也有keypress
,但已弃用,因为KeyboardEvent.keyCode
。您应该改用KeyboardEvent.key
返回按键名称的方法。如果Enter
选中,则将检查13(普通输入)以及108(数字键盘输入)。
需要注意的是$(window)
在一些其他的答案,而不是建议的$(document)
不工作keydown
/ keyup
如果你像覆盖那些可怜的用户,以及在IE <= 8,所以这不是一个很好的选择。
如果您<textarea>
的表单中有一个(当然应该接受Enter键),则将keydown处理程序添加到不是的每个单独的输入元素中<textarea>
。
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
为了减少样板,最好使用jQuery:
$(document).on("keydown", ":input:not(textarea)", function(event) {
return event.key != "Enter";
});
如果您在这些输入元素上附加了其他事件处理函数,并且由于某些原因也希望在enter键上调用这些事件处理函数,则仅阻止事件的默认行为,而不返回false,以便可以正确传播到其他处理函数。
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
如果您也想允许在提交按钮上输入回车键<input|button type="submit">
,那么您始终可以按如下所示优化选择器。
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
请注意,input[type=text]
正如其他一些答案所建议的那样,这些内容并不涵盖那些HTML5非文本输入,因此这不是一个好的选择器。
":input:not(textarea):not([type=submit]):not(button)"
如果您使用的<button>
不是<input type=submit>
input
吗?
W3C HTML5规范的第4.10.22.2节隐式提交说:
一个
form
元素的默认按钮是第一个提交按钮在树形结构顺序,其所属表单是form
元素。如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段聚焦时隐式提交表单,则按下“ enter”键),则对默认按钮已定义激活的表单进行此操作行为必须导致用户代理在该默认按钮上运行综合点击激活步骤。
因此,禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮放置为表单中的第一个提交按钮:
<form action="...">
<!-- Prevent implicit submission of the form -->
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<!-- ... -->
<button type="submit">Submit</button>
</form>
这种方法的一个不错的功能是,它无需JavaScript就可以工作;无论是否启用JavaScript,都需要使用符合标准的Web浏览器以防止隐式表单提交。
<input type="submit" disabled style="display: none" aria-hidden="true" />
,您可以将页面大小减少几个字符。:-P
我必须捕获与按键有关的所有三个事件,以防止提交表单:
var preventSubmit = function(event) {
if(event.keyCode == 13) {
console.log("caught ya!");
event.preventDefault();
//event.stopPropagation();
return false;
}
}
$("#search").keypress(preventSubmit);
$("#search").keydown(preventSubmit);
$("#search").keyup(preventSubmit);
您可以将以上所有内容组合成一个不错的紧凑版本:
$('#search').bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
$("#search").bind('keypress keyup keydown',preventSubmit)
;
<form>
标记中,所以Enter键将提交表单...此解决方案禁用了Enter键,并修复了问题,谢谢@Dave!然后我通过启用了某些字段的回车键id
。
console.log
,我更新了答案。
keypress keyup keydown
触发if条件中的任何代码。
如果使用脚本执行实际的提交,则可以向onsubmit处理程序添加“ return false”行,如下所示:
<form onsubmit="return false;">
从JavaScript调用表单上的commit()不会触发该事件。
采用:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
该解决方案适用于网站上的所有表单(也适用于Ajax插入的表单),仅防止Enter输入文本中使用s。将其放在文档准备就绪功能中,并终身忘记此问题。
e.which
很好。无需将其更改为e.keyCode
。两者都返回Enter键的值13。参见stackoverflow.com/a/4471635/292060和stackoverflow.com/a/18184976/292060
可以阻止Enter表单看起来像是不自然的,而不是阻止用户按下,而是可以保留表格并添加一些额外的客户端验证:调查未完成时,结果不会发送到服务器,并且用户会收到一条很好的消息,告知需要完成什么才能完成表格。如果您使用的是jQuery,请尝试验证插件:
这比Enter按下按钮需要更多的工作,但是可以肯定的是它将提供更丰富的用户体验。
一个不错的简单jQuery小解决方案:
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
});
var key = event.keyCode || event.which; if (key == 13) return false;
我目前无法发表评论,因此我将发布一个新答案
接受的答案还可以,但是并没有停止在numpad enter上提交。至少在当前版本的Chrome中。我不得不对此更改键码条件,然后它可以工作。
if(event.keyCode == 13 || event.keyCode == 169) {...}
完全不同的方法:
<button type="submit">
按时将激活表格中的第一个Enter。style="display:none;
false
,从而中止提交过程。<button type=submit>
提交表格。刚回来true
即可层叠提交。<textarea>
控件或其他窗体控件将表现正常。<input>
窗体控件将触发first <button type=submit>
,它返回false
,因此什么也没有发生。从而:
<form action="...">
<!-- insert this next line immediately after the <form> opening tag -->
<button type=submit onclick="return false;" style="display:none;"></button>
<!-- everything else follows as normal -->
<!-- ... -->
<button type=submit>Submit</button>
</form>
<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
不放置提交按钮可以。只需将脚本放到输入(类型=按钮)中,或添加eventListener(如果您希望它在表单中提交数据)。
宁可使用这个
<input type="button">
比使用这个
<input type="submit">
我只需要阻止特定的输入提交,因此我使用了一个类选择器,以便在需要的地方都将其作为“全局”功能。
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
和这个jQuery代码:
$('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
或者,如果击键不足:
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
一些注意事项:
在这里修改各种好的答案后,该Enter键似乎适用keydown
于所有浏览器。对于替代方法,我更新bind()
为on()
方法。
我是类选择器的忠实拥护者,权衡了所有优缺点和性能讨论。我的命名约定是'idSomething',以指示jQuery将其用作ID,以将其与CSS样式分开。
只能提交,但不能输入其他重要的回车键功能,例如在<textarea>
:中创建新段落:
window.addEventListener('keydown', function(event) {
//set default value for variable that will hold the status of keypress
pressedEnter = false;
//if user pressed enter, set the variable to true
if (event.keyCode == 13)
pressedEnter = true;
//we want forms to disable submit for a tenth of a second only
setTimeout(function() {
pressedEnter = false;
}, 100)
})
//find all forms
var forms = document.getElementsByTagName('form')
//loop through forms
for (i = 0; i < forms.length; i++) {
//listen to submit event
forms[i].addEventListener('submit', function(e) {
//if user just pressed enter, stop the submit event
if (pressedEnter == true) {
updateLog('Form prevented from submit.')
e.preventDefault();
return false;
}
updateLog('Form submitted.')
})
}
var log = document.getElementById('log')
updateLog = function(msg) {
log.innerText = msg
}
input,
textarea {
display: inline-block;
margin-bottom: 1em;
border: 1px solid #6f6f6f;
padding: 5px;
border-radius: 2px;
width: 90%;
font-size: 14px;
}
input[type=submit] {
background: lightblue;
color: #fff;
}
<form>
<p>Sample textarea (try enter key):</p>
<textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
<p>Sample textfield (try enter key):</p>
<input type="text" placeholder="" />
<br/>
<input type="submit" value="Save" />
<h3 id="log"></h3>
</form>
function(e)
它应该是function(event)
。否则,它对我有用。谢谢。
on("keydown", function(event) { enterPressed = true; }
然后在submit事件中,do on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}
可以确保无论延迟如何 都可以正常工作。
这是完美的方法,您将不会从页面重定向
$('form input').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
我有一个类似的问题,我有一个带有“ ajax文本字段”(Yii CGridView)的网格,并且只有一个提交按钮。每次我在文本字段中进行搜索,然后点击输入提交的表单。我必须对按钮做一些事情,因为它是视图之间的唯一通用按钮(MVC模式)。我所要做的就是删除type="submit"
并放置onclick="document.forms[0].submit()
我认为所有答案都已涵盖其中,但是如果您使用带有一些JavaScript验证代码的按钮,则只需将表单的onkeypress设置为Enter即可按预期方式调用您的提交:
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
onkeypress JS可能是您需要执行的任何操作。无需进行更大的全球变革。如果您不是一个从头开始编写应用程序的人,而您已经被投入修复其他人的网站而无需拆开并重新测试它,则尤其如此。
这里已经有很多好的答案,我只是想从UX的角度做出一些贡献。窗体中的键盘控件非常重要。
问题是如何禁止在按键上提交Enter
。不是如何Enter
在整个应用程序中忽略。因此,请考虑将处理程序附加到表单元素,而不是窗口。
禁用Enter
表单提交仍应允许以下操作:
Enter
关注提交按钮时的表单提交。Enter
。这只是样板,但它符合所有三个条件。
$('form').on('keypress', function(e) {
// Register keypress on buttons.
$attr = $(e.target).attr('type);
if ($attr === 'button' || $attr === 'submit') {
return true;
}
// Ignore keypress if all fields are not populated.
if (e.which === 13 && !fieldsArePopulated(this)) {
return false;
}
});
我在这里看不到的答案:当您在页面上的各个元素之间Enter切换时,在到达提交按钮时按会触发表单上的onsubmit处理程序,但会将事件记录为MouseEvent。这是我涵盖大多数基地的简短解决方案:
这不是与jQuery相关的答案
<form onsubmit="return false;" method=post>
<input type="text" /><br />
<input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
<input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>
window.submitMouseOnly=function(evt){
let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}
查找工作示例:https : //jsfiddle.net/nemesarial/6rhogva2/
在我的特定情况下,我必须停止ENTER提交表单,还必须模拟单击Submit按钮。这是因为提交按钮上具有单击处理程序,因为我们在模式窗口中(继承的旧代码)。无论如何,这是我针对这种情况的组合解决方案。
$('input,select').keypress(function(event) {
// detect ENTER key
if (event.keyCode == 13) {
// simulate submit button click
$("#btn-submit").click();
// stop form from submitting via ENTER key press
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
});
该用例对使用IE8的人员特别有用。
使用Javascript(无需检查任何输入字段):
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
e.preventDefault();
return false;
}
}, true);
</script>
如果有人想将其应用于特定字段,例如输入类型文本:
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
e.preventDefault();
return false;
}
}
}, true);
</script>
就我而言,这很好。
您也可以javascript:void(0)
用来阻止表单提交。
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
method="post"
在表单上时不起作用。例如,我希望表单通过按钮提交,但不希望在集中输入时按Enter。
method="post"
形式及其作品,请再次检查。
在对其他解决方案感到沮丧之后,这对所有浏览器都有效。我也建议您使用name_space外部函数来避免声明全局变量。
$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);
this.stifle = function(event) {
event.cancelBubble;
event.returnValue = false;
if(this.is_ie === false) {
event.preventDefault();
}
return false;
}
this.on_enter = function(func) {
function catch_key(e) {
var enter = 13;
if(!e) {
var e = event;
}
keynum = GetKeyNum(e);
if (keynum === enter) {
if(func !== undefined && func !== null) {
func();
}
return name_space.stifle(e);
}
return true; // submit
}
if (window.Event) {
window.captureEvents(Event.KEYDOWN);
window.onkeydown = catch_key;
}
else {
document.onkeydown = catch_key;
}
if(name_space.is_ie === false) {
document.onkeypress = catch_key;
}
}
}
样品使用:
$(function() {
name_space.on_enter(
function () {alert('hola!');}
);
});
采用:
// Validate your form using the jQuery onsubmit function... It'll really work...
$(document).ready(function(){
$(#form).submit(e){
e.preventDefault();
if(validation())
document.form1.submit();
});
});
function validation()
{
// Your form checking goes here.
}
<form id='form1' method='POST' action=''>
// Your form data
</form>