Jquery 通过按Enter键阻止用户提交表单
我在一个网站上做了一个调查，用户点击回车键（我不知道为什么）并在没有点击提交按钮的情况下意外提交了调查（表格），似乎出现了一些问题。有没有办法防止这种情况Jquery 通过按Enter键阻止用户提交表单,jquery,html,forms,form-submit,Jquery,Html,Forms,Form Submit,我在一个网站上做了一个调查，用户点击回车键（我不知道为什么）并在没有点击提交按钮的情况下意外提交了调查（表格），似乎出现了一些问题。有没有办法防止这种情况 我在调查中使用了HTML、PHP5.2.9和jQuery。您可以使用JavaScript方法检查是否按了Enter键，如果按了，则停止提交 <script type="text/javascript"> function noenter() { return !(window.event && window
我在调查中使用了HTML、PHP5.2.9和jQuery。您可以使用JavaScript方法检查是否按了Enter键，如果按了，则停止提交
<script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
函数noenter（）{
return！（window.event&&window.event.keyCode==13）；}
只需在submit方法上调用它。您可以使用以下方法
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
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;
}
});
});
您可以保持表单的原样，并添加一些额外的客户端验证，而不是阻止用户按Enter键（这可能看起来很不自然），当调查未完成时，结果不会发送到服务器，用户会收到一条很好的消息，告诉用户完成表单需要完成什么。如果您使用的是jQuery，请尝试验证插件： 这将需要比按下回车键更多的工作，但肯定会提供更丰富的用户体验。禁止在任何地方按回车键 如果表单中没有
键上检查表单中的每个按键。如果它不是Enter
，那么它将返回true
，并且一切照常进行。如果它是Enter
，那么它将返回false
，任何内容都将立即停止，因此表单将不会提交
由于键控
太晚，无法阻止表单提交，因此首选该事件。历史上也有，但这是不赞成的，因为是。您应该改为使用返回被按下键的名称的。选中Enter
时，将选中13（正常输入）和108（numpad输入）
请注意，$（窗口）
在一些其他答案中，而不是$（文档）
中建议的$（窗口）
不适用于IE中的键控
/键控
，这是一个非常简单的小jQuery解决方案：
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
});
为了防止表单提交，我必须捕获与按键相关的所有三个事件：
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(); }
});
给表单一个“javascript:void（0）；”的操作似乎有办法
<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
alert('Hello');
}
});
});
</script>
$（文档）.ready（函数（）{
$（窗口）.keydown（函数（事件）{
如果（event.keyCode==13）{
警惕（“你好”）；
}
});
});
我有一个类似的问题，我有一个带有“ajax文本字段”（Yii CGridView）的网格，只有一个提交按钮。每次我在文本字段上搜索并点击“输入提交的表单”。我不得不使用按钮，因为它是视图之间唯一的常用按钮（MVC模式）。我所要做的就是删除type=“submit”
并放置onclick=“document.forms[0]。submit（）
在我的特定情况下，我必须停止ENTER提交表单，并模拟“提交”按钮的单击。这是因为“提交”按钮上有一个单击处理程序，因为我们在一个模式窗口中（继承的旧代码）。在任何情况下，这里是我的组合解决方案
$('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的人特别有用。这对我来说很有用
jQuery.each($("#your_form_id").find('input'), function(){
$(this).bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
});
如果使用脚本进行实际提交，则可以向onsubmit处理程序添加“return false”行，如下所示：
<form onsubmit="return false;">
从JavaScript调用表单上的submit（）不会触发事件。我认为所有答案都涵盖了它，但是如果您使用带有JavaScript验证代码的按钮，您只需将表单的onkeypress设置为Enter即可按预期调用submit：
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
onkeypress JS可以是您需要做的任何事情。没有必要进行更大的全局性更改。如果您不是从头开始编写应用程序的人，并且您被带到其他人的网站进行修复，而无需将其拆开并重新测试，这一点尤其正确。我想添加一点CoffeeScript代码（未经现场测试）：
（我希望你喜欢除非子句中的好技巧。）我需要防止只提交特定的输入，所以我使用了一个类选择器，让它成为我需要的“全局”功能
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
或者，如果键控功能不足：
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
一些注意事项：
在这里修改各种好的答案，回车键似乎适用于所有浏览器上的keydown
。另外，我将bind（）
更新为on（）
方法
我非常喜欢类选择器，权衡所有的优缺点和性能讨论。我的命名约定是“idSomething”，表示jQuery将其用作id，以将其与CSS样式区分开来。使用：
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
此解决方案适用于网站上的所有表单（也适用于使用Ajax插入的表单），防止只输入文本。将其置于文档就绪功能中，然后终生忘记此问题。我还不能发表评论，因此我将发布一个新的答案
接受的答案还行，但它并没有在numpad enter上停止提交。至少在当前的Chrome版本中是这样。我必须将keycode条件改为这个，然后它才能工作
if(event.keyCode == 13 || event.keyCode == 169) {...}
我在这里没有看到答案：当您在页面上的元素中进行tab操作时，当您到达submit按钮时按Enter键将触发表单上的onsubmit处理程序，但它会将事件记录为MouseeEvent。下面是我的简短解决方案，以涵盖大多数基础：
这不是与jQuery相关的答案
HTML
要找到一个工作示例：一种完全不同的方法：
按Enter键将激活表单中的第一个
。
这
<form onsubmit="return false;">
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
$ ->
$(window).bind 'keypress', (event) ->
if event.keyCode == 13
unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
event.preventDefault()
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
$('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
if(event.keyCode == 13 || event.keyCode == 169) {...}
<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();
}
<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>
$('form').submit(function () {
if ($(document.activeElement).attr('type') == 'submit')
return true;
else return false;
});
<input type="button">
<input type="submit">
<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>
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}
$('form input').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
$(document).on("keydown","form", function(event)
{
node = event.target.nodeName.toLowerCase();
type = $(event.target).prop('type').toLowerCase();
if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
{
event.preventDefault();
return false;
}
});
// disable form submit with enter
$('form input:not([type="submit"])').keydown((e) => {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
return true;
});