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

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


当前回答

您可以使用一种方法,例如

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

在阅读原文的评论时,为了让它更有用,并允许人们在填写完所有字段后按Enter:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

其他回答

第4.10.22.2节隐式提交的W3C HTML5规范说:

A form element's default button is the first submit button in tree order whose form owner is that form element. If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button. Note: Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)

因此,一种符合标准的禁用表单隐式提交的方法是将禁用的提交按钮作为表单中的第一个提交按钮:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

这种方法的一个很好的特性是它不需要JavaScript;无论是否启用JavaScript,都需要一个符合标准的web浏览器来防止隐式表单提交。

没有提交按钮也行。只需在输入(type=button)中放入一个脚本,如果希望它提交表单中的数据,则添加eventListener。

而是使用这个

<input type="button" onclick="event.preventDefault();this.closest('form').submit();">

而不是用这个

<input type="submit">

注意:这里需要onclick在点击时实际提交表单。默认情况下,type="button"不足以提交。

这是完美的方式,你不会从你的页面重定向

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

我在这里没有看到答案:当您通过页面上的元素时,当您到达提交按钮时按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/

如果你正在使用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>