10赞

如何防止ENTER键提交Web表单？

作者：地之南_816 | 2023-08-30 11:05

如何解决《如何防止ENTER键提交Web表单？》经验，为你挑选了10个好方法。

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

1> KooiInc..：

[ 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;
}

现在,您可以在表单上定义一个按键处理程序:

document.querySelector('form').onkeypress = checkEnter;

顺便说一句:您可以在checkEnter函数中添加对输入类型的检查(通过事件源)以排除textarea的.

2> thetoolman..：

这是一个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;
 });
});

用最简单的方法:$("#myinput").keydown(function(e){if(e.which == 13)e.preventDefault();}); 关键是一起使用"keydown"和event.preventDefault().它不适用于"keyup".

3> Paul Tarjan..：

只需从onsubmit处理程序返回false

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

@Paul,这是如何获得38票的？完全停止提交""****将婴儿扔出洗澡水.

如果您希望通过按"提交"按钮提交表单,这不是一个好主意

Doesn't work because the submit button no longer submits the form

@Pacerier在SPA的上下文中,您几乎总是希望手动处理表单提交.在这种情况下,始终阻止浏览器提交表单(并刷新页面,重新启动应用程序)是合理的.

这似乎是最简单的答案.我在谷歌浏览器上试过它,它运行正常.你在每个浏览器中测试过这个吗？

很棒的主意我们不需要从页面移动

4> mtntrailrunn..：

//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`将实现相同的结束,但允许事件到达父元素中的处理程序.仍将阻止默认操作(表单加载)

5> hash..：

您将不得不调用此函数,它将取消窗体的默认提交行为.您可以将其附加到任何输入字段或事件.

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();
    }
}

你能解释一下这个函数的调用位置和方法吗？

e应该是一个参数,然后你应该检查window.event.此外,您应该从事件中获取密钥代码.最后,你应该返回false.

6> DanSingerman..：

ENTER键仅激活表单的默认提交按钮,这将是第一个

浏览器在表单中找到.

因此,没有提交按钮,但有类似的东西

编辑:回应评论中的讨论:

如果您只有一个文本字段,则这不起作用 - 但在这种情况下可能是所需的行为.

另一个问题是,这依赖于Javascript来提交表单.从可访问性的观点来看,这可能是一个问题.这可以通过写来解决使用JavaScript,然后放了一个内