如何防止在基于web的应用程序中按ENTER键提交表单?
当前回答
请查看这篇文章如何防止按ENTER键提交web表单?
$(“.pc_prevent_submit”)时函数(){ 美元(窗口).keydown(函数(事件){ 如果事件。keyCode == 13) { event.preventDefault (); 返回错误; } }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <form class= " pc_prevent_submit " action= " " method= " post " > <input type= " text " name= " username " > <input type= " password " name= " userpassword " > <input type= " submit " value= " submit " > > < /形式
其他回答
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
这是一个jQuery处理程序,可以用来停止输入提交,也停止退格键->返回。"keyStop"对象中的(keyCode: selectorString)对用于匹配不应该触发默认动作的节点。
记住,网络应该是一个可访问的地方,这打破了键盘用户的期望。也就是说,在我的情况下,我正在工作的web应用程序不喜欢后退按钮,所以禁用它的快捷键是可以的。“应该输入->提交”的讨论很重要,但与实际提出的问题无关。
以下是代码,由您自行考虑可访问性以及为什么要这样做!
$(function(){
var keyStop = {
8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
13: "input:text, input:password", // stop enter = submit
end: null
};
$(document).bind("keydown", function(event){
var selector = keyStop[event.which];
if(selector !== undefined && $(event.target).is(selector)) {
event.preventDefault(); //stop event
}
return true;
});
});
为了防止在文本区域或输入字段中按enter键时提交表单,请检查submit事件以查找发送该事件的元素类型。
示例1
HTML
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
更好的解决方案是,如果没有提交按钮,而使用普通按钮触发事件。这是因为在第一个示例中触发了2个提交事件,而在第二个示例中只触发了1个提交事件。
示例2
HTML
<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
这对我很管用。 onkeydown = "返回! (event.keyCode = = 13)”
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>
在过去,我总是用类似上面的按键处理程序来完成它,但今天遇到了一个更简单的解决方案。输入键只是触发表单上第一个未禁用的提交按钮,所以实际上所需要的只是拦截试图提交的按钮:
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
就是这样。按键将像往常一样由浏览器/字段等处理。如果进入-提交逻辑被触发,那么浏览器将找到隐藏的提交按钮并触发它。javascript处理程序会阻止提交。