A form element's default button is the first submit button in tree order whose form owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the"enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.
Note: Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)
BLOCKQUOTE>
因此,禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮作为表单中的第一个提交按钮:
1 2 3 4 5 6 7 8
| <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浏览器来防止隐式表单提交。
如果您使用脚本进行实际提交,那么您可以将"return false"行添加到onsubmit处理程序,如下所示:
1
| <form onsubmit="return false;"> |
从JavaScript调用表单上的submit()不会触发事件。
-
不适用于Chrome
-
在Chrome中适用于我,这也会禁用提交按钮,如果您想在提交按钮本身上触发onlick-event,这很好。 Ajax提示:在返回之前添加函数调用,用户仍然可以在不将表单提交到页面的情况下点击回车键。
-
在Chrome,IE-11和Firefox上为我工作,是最简单的解决方案。正如一些答案那样,在页面的整个部分禁用回车键似乎太极端并且容易出错。
采用:
1 2 3 4 5 6
| $(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
}); |
此解决方案适用于网站上的所有表单(也适用于使用Ajax插入的表单),仅防止输入文本中的Enters。将它放在文档就绪功能中,并终生忘记这个问题。
-
我认为原来的答案e.which很好;无需将其更改为e.keyCode。两者都返回输入键的值13。请参阅stackoverflow.com/a/4471635/292060和stackoverflow.com/a/18184976/292060
-
此解决方案负责两种解决方案:1。)不要在输入2上提交表单。)允许输入textareas
您可以按原样保留表单,并添加一些额外的客户端验证,而不是阻止用户按下Enter:当调查未完成时,结果不会发送到服务器,用户会收到一条好消息告诉我们需要完成什么才能完成表格。如果您使用的是jQuery,请尝试使用Validation插件:
http://docs.jquery.com/Plugins/Validation
这需要比捕获Enter按钮更多的工作,但肯定会提供更丰富的用户体验。
-
这听起来不错,但是可选字段存在问题,用户可能会错误地按Enter键并且表单将被提交。除非您按要求放置每个字段(没有默认选项,不允许空白字段......),我不知道您何时知道调查何时未完成。
我还不能评论,所以我会发一个新的答案
接受的答案是ok-ish,但它并没有停止提交numpad enter。至少在当前版本的Chrome中。我不得不改变键码条件,然后才行。
1
| if(event.keyCode == 13 || event.keyCode == 169) {...} |
-
Enter和Return之间的区别 - 许多销售点运营商仅使用numpad。 +1
-
现在(05-21-2015),对于正常输入和小键盘输入,keyCode为13 [Chrome 42,IE 11,FIreFox 36]
一个简单的小jQuery解决方案:
1 2 3 4 5
| $("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
}); |
-
+1我正在寻找一个jQuery替代品,而不是使用像var key = event.keyCode || event.which; if (key == 13) return false;这样的普通JS
-
从技术上讲,这仍然是POJ只是一个简单的jquery包装器。你给出的代码几乎是一样的。
这是我达成目标的解决方案,
它干净而有效。
1 2 3 4 5
| $('form').submit(function () {
if ($(document.activeElement).attr('type') == 'submit')
return true;
else return false;
}); |
一种完全不同的方法:
按下Enter将激活表单中的第一个。
即使使用style="display:none;隐藏按钮也是如此
该按钮的脚本可以返回false,这将中止提交过程。
您仍然可以使用另一个来提交表单。只需返回true即可级联提交。
在真正的提交按钮被聚焦时按Enter将激活真实的提交按钮。
在或其他表单控件中按Enter将正常运行。
在表单控件中按Enter将触发第一个,返回false,因此没有任何反应。
从而:
1 2 3 4 5 6 7 8
| <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> |
-
嗯,在Chrome和Firefox中,更短的版本是
-
我真的不喜欢"忽略13键码"的方式,所以我开始思考一些简单而棘手的方式,这个想法出现在我脑海中,当我向下滚动这个页面时,我看到了这个线程:)。另外一个是相互的想法,当然也是最好的解决方案。
-
完美的答案给我。我想要一个表单来模拟CLI,这样用户就可以按下每个下一个字段的输入,然后在最后进行提交。
给表单一个'javascript:void(0);'的动作似乎可以做到这一点
1 2 3 4 5 6 7 8 9 10 11
| <form action="javascript:void(0);">
<input type="text" />
</form>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
alert('Hello');
}
});
}); |
我需要阻止提交的特定输入,所以我使用了一个类选择器,让它成为一个"全局"功能,无论我需要它。
1
| <input id="txtEmail" name="txtEmail" class="idNoEnter" .... /> |
而这个jQuery代码:
1 2 3 4 5
| $('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
}); |
或者,如果keydown不足:
1 2 3 4 5
| $('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
}); |
一些说明:
在这里修改各种好的答案,Enter键似乎适用于所有浏览器上的keydown。或者,我将bind()更新为on()方法。
我是班级选择者的忠实粉丝,权衡所有利弊和绩效讨论。我的命名约定是'idSomething',表示jQuery使用它作为id,将它与CSS样式分开。
-
这只适用于提交按钮吗?
-
这适用于表单中的文本框元素。在您键入时,在文本框中按Enter键,默认行为将提交表单。这会拦截回车键并阻止它提交。
不要对输入或按钮使用type ="submit"。
使用type ="button"并使用js [Jquery / angular / etc]将表单提交给服务器。
您可以创建一个JavaScript方法来检查Enter键是否被命中,如果是,则停止提交。
1 2 3
| <script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); } |
只需在提交方法上调用它即可。
不提交提交按钮就可以了。只需将脚本放入输入(type =按钮)或添加eventListener,如果您希望它在表单中提交数据。
而是使用它
比用这个
我有一个类似的问题,我有一个网格"ajax textfields"(Yii CGridView)和一个提交按钮。每次我在文本字段上搜索并点击输入提交的表单。我不得不用按钮做一些事情,因为它是视图之间唯一的常用按钮(MVC模式)。我所要做的就是删除type="submit"并输入onclick="document.forms[0].submit()
我认为它涵盖了所有答案,但是如果你使用带有一些JavaScript验证代码的按钮,你可以设置表单的onkeypress for Enter来按预期调用你的提交:
1
| <form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;"> |
onkeypress JS可以是你需要做的任何事情。没有必要进行更大规模的全球变革。如果您不是从头开始编写应用程序的人,并且您已经被修复到别人的网站而不将其拆开并重新测试它,则尤其如此。
-
我意识到它是Tom Hubbards答案的一个变种,我+ 1d因为它实际上是我今天在搜索其他想法之前所做的。
只有BLOCK SUBMIT而不是其他重要的输入键功能,例如在中创建一个新段落:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| 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
} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| 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;
} |
1 2 3 4 5 6 7 8 9 10 11 12 13
| <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">
</form> |
-
想知道谁和为什么会这样做:|我的解决方案是什么问题?
-
赞成该贡献。接受的答案打破了大多数形式的UI,阻止"输入"在整个应用程序上注册。不好。我认为允许输入在表单元素中处理是一个好主意,特别是按钮,所以我喜欢你要走的路径。我认为这可以在没有超时的情况下实现。例如,只需查看事件处理程序中的element属性即可。允许按钮并提交
-
@NathanCH - 这段代码与你说的完全相反。它只会阻止输入提交表单并且不会阻止任何其他功能 - 例如,您可能有一个文本字段并希望使用enter来创建新段落。
-
这是第一行的拼写错误。而不是function(e)它应该是function(event)。否则,它对我有用。谢谢。
-
@GuillermoPrandi谢谢!这就解释了为什么解决方案得到了一些支持
-
为什么setTimeout(function() { pressedEnter = false; }, 100)不在event.keyCode == 13条件下?
这里有很多好的答案,我只是想从UX的角度做出贡献。表单中的键盘控件非常重要。
问题是如何在keypress Enter上禁用提交。不是如何忽略整个应用程序中的Enter。因此,请考虑将处理程序附加到表单元素,而不是窗口。
禁用Enter表单提交仍应允许以下内容:
当提交按钮聚焦时,通过Enter提交表单。
填充所有字段时的表单提交。
通过Enter与非提交按钮交互。
这只是样板,但它遵循所有三个条件。
1 2 3 4 5 6 7 8 9 10 11 12
| $('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;
}
}); |
这适合我
1 2 3 4 5
| jQuery.each($("#your_form_id").find('input'), function(){
$(this).bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
}); |
在我的具体情况下,我不得不停止ENTER提交表单,并模拟单击提交按钮。这是因为提交按钮上有一个点击处理程序,因为我们在一个模态窗口内(继承了旧代码)。在任何情况下,这是我的组合解决方案。
1 2 3 4 5 6 7 8 9
| $('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:void(0)来阻止表单提交。
1 2 3 4 5
| <form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form> |
1 2 3 4 5
| <form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form> |
我在这里没有看到的东西回答:当你浏览页面上的元素时,当你到达提交按钮时按Enter将触发表单上的onsubmit处理程序,但它会将事件记录为MouseEvent。这是我的简短解决方案,涵盖了大多数基础:
这不是与jQuery相关的答案
HTML
1 2 3 4 5
| <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> |
JavaScript的
1 2 3 4
| 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/
进入你的CSS并添加它然后会自动阻止你的公式的提交,只要你提交输入,如果你不再需要它你可以删除它或输入activate和deactivate而不是
1 2 3 4 5 6
| input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
} |
我想添加一些CoffeeScript代码(不经过现场测试):
1 2 3 4 5
| $ ->
$(window).bind 'keypress', (event) ->
if event.keyCode == 13
unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
event.preventDefault() |
(我希望你喜欢除非条款中的好技巧。)
使用Javascript(不检查任何输入字段):
1 2 3 4 5 6
| window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
e.preventDefault();
return false;
}
}, true); |
如果有人想在特定字段上应用它,例如输入类型文本:
1 2 3 4 5 6 7 8
| 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); |
这在我的情况下运作良好。
采用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| // 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> |
在对其他解决方案感到非常沮丧之后,这在所有浏览器中都适用于我。 name_space外部函数只是为了远离声明全局变量,我也建议这样做。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| $(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;
}
}
} |
样品用途:
1 2 3 4 5
| $(function() {
name_space.on_enter(
function () {alert('hola!');}
);
}); |
在我的情况下,我在表单中有几个jQuery UI自动完成字段和textareas,所以我绝对希望他们接受Enter。所以我从表单中删除了type="submit"输入并添加了一个锚Ok。然后我将其设置为按钮并添加以下代码:
1 2 3 4 5 6 7 8
| $( '#btn' ).click( function( event ){
event.preventDefault();
if ( validateData() ){
$( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
}
return false;
}); |
如果用户填写所有必填字段,则validateData()成功并且表单提交。