如何防止 ENTER 按键提交网络表单?

IT技术 javascript events
2021-01-19 11:02:48

您如何防止ENTER按键在基于 Web 的应用程序中提交表单?

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;
这种方法的一个问题(将此函数与整个表单上的事件处理程序一起使用)是,它还可以防止在同样在表单中的文本区域中发生输入(通常需要输入)。
2021-03-14 11:02:48
@Jonathan:您可以将处理程序附加到单个输入字段或某些包含输入字段集合(但不是按钮)的 div,而不是整个表单。
2021-03-18 11:02:48
作品。我将此添加到单个输入中,因为我想避免 <enter> 提交表单。它有一个执行内部搜索的按钮,它实际上提高了可用性。
2021-03-21 11:02:48
顺便说一句:您可以在 checkEnter 函数中添加对输入类型的检查(通过事件源)以排除 textarea 的。
2021-03-28 11:02:48
@LonnieBest:感谢您的关注。确实阅读了我对这个答案的评论(见上文),是吗?无论如何,我修改了这个相当旧的答案。
2021-03-31 11:02:48

这是一个 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;
 });
});
您在每次击键时都访问 keyStop 数组:不好。我会写 if(event.which in keyStop)...而不是访问未定义的属性或更好:添加这样的第一行: if(event.which in keyStop === false) return;
2021-03-22 11:02:48
以最简单的方式: $("#myinput").keydown(function (e) { if(e.which == 13) e.preventDefault(); }); 关键是同时使用“keydown”和 event.preventDefault()。它不适用于“keyup”。
2021-03-26 11:02:48
与其他解决方案相比,这具有优势,其他解决方案只是阻止浏览器的自动建议将继续正常工作的键 13。
2021-03-26 11:02:48

只需从 onsubmit 处理程序返回 false

<form onsubmit="return false;">

或者如果你想在中间有一个处理程序

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">
如果您希望通过按下submit按钮提交表单,这不是一个好主意
2021-03-13 11:02:48
@Paul,这是如何获得 38 票的?停止<form>从得到提交的全部是扔婴儿连同洗澡水一起倒掉。
2021-03-23 11:02:48
不起作用,因为提交按钮不再提交表单
2021-03-25 11:02:48
这似乎是最简单的答案。我在谷歌浏览器上试过,效果很好。你有没有在每个浏览器中测试过这个?
2021-04-06 11:02:48
@Pacerier 在 SPA 的上下文中,您几乎总是希望手动处理表单提交。在这种情况下,总是阻止浏览器提交表单(并刷新页面,重新启动应用程序)是合理的。
2021-04-10 11:02:48
//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});
这很好用。e.preventDefault()而不是return false将达到相同的目的,但允许事件到达父元素中的处理程序。默认操作(表单提交)仍将被阻止
2021-03-12 11:02:48

您将不得不调用这个函数,它只会取消表单的默认提交行为。您可以将其附加到任何输入字段或事件。

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();
    }
}
你能解释一下在哪里以及如何调用这个函数吗?
2021-03-30 11:02:48
e 应该是一个参数,然后你应该检查 window.event。此外,您应该从事件中获取键码。最后,您应该返回 false。
2021-04-03 11:02:48