如何防止在基于web的应用程序中按ENTER键提交表单?
当前回答
我认为,你可以在javascript的表单中捕获键下,防止冒泡。网页上的ENTER基本上只是提交当前所选控件所在的表单。
其他回答
我也遇到了同样的问题(表单包含大量的文本字段和不熟练的用户)。
我是这样解决的:
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的字段中。
只需从onsubmit处理程序返回false
<form onsubmit="return false;">
或者如果你想要一个中间的处理程序
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
在过去,我总是用类似上面的按键处理程序来完成它,但今天遇到了一个更简单的解决方案。输入键只是触发表单上第一个未禁用的提交按钮,所以实际上所需要的只是拦截试图提交的按钮:
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
就是这样。按键将像往常一样由浏览器/字段等处理。如果进入-提交逻辑被触发,那么浏览器将找到隐藏的提交按钮并触发它。javascript处理程序会阻止提交。
这是一个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;
});
});
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会更好。