如何防止在基于web的应用程序中按ENTER键提交表单?
当前回答
这是一个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;
});
});
其他回答
[2012修订版,没有内联处理程序,保留textarea进入处理]
function checkEnter(e){
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
现在你可以在表单上定义一个按键处理程序: <形式[…onkeypress="return checkEnter(event)">
document.querySelector('form').onkeypress = checkEnter;
我也遇到了同样的问题(表单包含大量的文本字段和不熟练的用户)。
我是这样解决的:
function chkSubmit() {
if (window.confirm('Do you want to store the data?')) {
return true;
} else {
// some code to focus on a specific field
return false;
}
}
在HTML代码中使用这个:
<form
action="go.php"
method="post"
accept-charset="utf-8"
enctype="multipart/form-data"
onsubmit="return chkSubmit()"
>
通过这种方式,ENTER键按计划工作,但需要确认(通常是第二次按ENTER键)。
我留给读者的任务是,如果用户决定继续使用表单,那么脚本会将用户发送到按ENTER的字段中。
简而言之,纯Javascript的答案是:
<script type="text/javascript">
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 type='text'的"Enter"键动作。访问者仍然可以在整个网站上使用“Enter”键。
如果你想在其他操作中禁用“Enter”,你可以添加console.log(e);为了你的测试目的,在chrome中按F12,进入“控制台”选项卡,点击页面上的“backspace”,看看里面返回了什么值,然后你可以针对所有这些参数来进一步增强上面的代码,以满足你对“e.t target”的需求。节点名”、“e。target。键入”和更多…
在这里可以看到我对类似问题的详细回答
如果这些答案都不适合你,试试这个。在实际提交表单的按钮之前添加一个提交按钮,对事件什么都不做。
HTML
<!-- The following button is meant to do nothing. This button will catch the "enter" key press and stop it's propagation. -->
<button type="submit" id="EnterKeyIntercepter" style="cursor: auto; outline: transparent;"></button>
JavaScript
$('#EnterKeyIntercepter').click((event) => {
event.preventDefault(); //The buck stops here.
/*If you don't know what this if statement does, just delete it.*/
if (process.env.NODE_ENV !== 'production') {
console.log("The enter key was pressed and captured by the mighty Enter Key Inceptor (⌐■_■)");
}
});
stopSubmitOnEnter (e) {
var eve = e || window.event;
var keycode = eve.keyCode || eve.which || eve.charCode;
if (keycode == 13) {
eve.cancelBubble = true;
eve.returnValue = false;
if (eve.stopPropagation) {
eve.stopPropagation();
eve.preventDefault();
}
return false;
}
}
然后在表格上:
<form id="foo" onkeypress="stopSubmitOnEnter(e);">
不过,如果不使用突兀的JavaScript会更好。