您如何防止ENTER按键在基于 Web 的应用程序中提交表单?
如何防止 ENTER 按键提交网络表单?
IT技术
javascript
events
2021-01-19 11:02:48
6个回答
[修订版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;
}
现在您可以在表单上定义一个按键处理程序:
<form [...] onkeypress="return checkEnter(event)">
document.querySelector('form').onkeypress = checkEnter;
这是一个 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;
});
});
只需从 onsubmit 处理程序返回 false
<form onsubmit="return false;">
或者如果你想在中间有一个处理程序
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
您将不得不调用这个函数,它只会取消表单的默认提交行为。您可以将其附加到任何输入字段或事件。
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();
}
}
其它你可能感兴趣的问题