如何防止在基于web的应用程序中按ENTER键提交表单?
当前回答
如何:
<asp:Button ID="button" UseSubmitBehavior="false"/>
其他回答
[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 doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
我也遇到了同样的问题(表单包含大量的文本字段和不熟练的用户)。
我是这样解决的:
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处理程序会阻止提交。