我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?

我在调查中使用HTML, PHP 5.2.9和jQuery。


当前回答

我在这里没有看到答案:当您通过页面上的元素时,当您到达提交按钮时按Enter将触发表单上的onsubmit处理程序,但它将记录事件为MouseEvent。以下是我的简单解决方案:

这不是一个与jquery相关的答案

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

要找到一个工作示例:https://jsfiddle.net/nemesarial/6rhogva2/

其他回答

我需要防止只提交特定的输入,所以我使用了一个类选择器,让它成为我需要的“全局”特性。

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

jQuery代码:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

或者,如果keydown不够用:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

一些注意事项:

在这里修改各种不错的答案,Enter键似乎适用于所有浏览器的keydown。对于替代方法,我将bind()更新为on()方法。

我是类选择器的忠实粉丝,权衡所有的利弊和性能讨论。我的命名约定是'idSomething',表示jQuery将其用作id,以将其与CSS样式分开。

进入你的css,把它添加进去,然后会自动阻止公式的提交,只要你有提交输入,如果你不再需要它,你可以删除它,或者输入activate和deactivate

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

我还不能评论,所以我会发布一个新的答案

接受的答案是ok-ish,但它不是停止提交在numpad进入。至少在当前版本的Chrome中是这样。我不得不改变这个键码条件,然后它工作。

if(event.keyCode == 13 || event.keyCode == 169) {...}

我认为它很好地涵盖了所有的答案,但如果你正在使用一个带有JavaScript验证代码的按钮,你可以将表单的onkeypress设置为Enter来调用你的提交:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

onkeypress JS可以是你需要做的任何事情。没有必要进行更大的全球性变革。如果你不是那个从头开始编写应用程序的人,而且你被请去修复别人的网站,而没有把它拆开并重新测试它,这就尤其正确。

如果你正在使用Alpine,你可以通过按Enter来阻止表单提交:

<div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

或者,您可以使用.window修饰符在页面的根窗口对象而不是元素上注册事件侦听器。

<form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>