Question

具体来说，我不想在按下回车键时使用已经推荐的event.preventDefault()方法，因为这会破坏至少Internet Explorer中数据列表的功能。

我尝试了一些类似

的内容

$("#form").submit(function(event){
    console.log(event);
    return false; // Allows me to read the console before the form submits!
});

要比较事件之间的差异（单击提交按钮与按Enter键），并且似乎没有任何明显的事情。我本以为后者会有event.keyCode，但事实并非如此。

我能想到的一个冗长的解决方法似乎是删除我的提交按钮，并将其替换为常规按钮，其单击必须提交表单。但是这样，我必须在输入中捕获输入键按下并处理从头开始提交表单。丑陋，但可行。同样，如果我能提供帮助，我会不想要应用任何preventDefault()。

Answer 1

一种hacky解决方案，但您可以将事件处理程序绑定到click按钮上的submit，而不是submit的{{1}}。然后，您可以检查是否存在与事件关联的非零坐标。如果是，则单击#form按钮，否则按下回车键。 e.g。

submit

JSFiddle Here

Answer 2

您可以改为使用mousedown事件，按Enter键不会触发该事件

$('input[type="submit"]').on('mousedown', function() {

});

Answer 3

抱歉，这么晚了，但是我正在解决类似的问题。除了来自@Clive的答案以外，上述答案都是骇人听闻的，并且违反了默认的浏览器行为。尽管这类黑客可能会在某些浏览器上起作用，但对于某些用户而言，它们很有可能破坏诸如屏幕阅读器之类的辅助技术。规范的存在不仅仅是DOM的可视化表示。

我正在收集问题在这里：

具体地说，我不想使用已经推荐的方法按下回车键时的event.preventDefault（）... ...比较事件之间的差异（点击提交按钮按下Enter键），似乎什么也没有很明显...

考虑一下：

<form>
  <input />
  <!-- This is best practice for accessibly hiding DOM elements for sighted users -->
  <button
    type="submit" 
    style="position:absolute;display:block;left:-10000px;width:1;height:1;overflow:hidden;" 
    onClick="function(evt) {
      console.log('User pressed enter to submit form, or focused to this off-screen button potentially using a screenreader.', evt.target);
    }">
      this is the form submission button
  </button>
  <!-- You could include a hidden label here to explain why there are two submit buttons to screenreader users, there also may be an aria property -->
  <button
    type="button"
    onClick="function(evt) {
      console.log('user clicked custom submit button to submit form', evt.target);
    }">
      this is the visible submit button
  </button>
</form>

jsfiddle

mousedown是用于触发非样式操作的危险事件。意外单击按钮的用户无法再改变主意。传统上，您可以选择网页上的任何元素或将其置于焦点上，并可以选择拖动或重新聚焦以防止按钮动作或链接导航。对于许多浏览器而言，onclick是一个很好的通用事件，在这里，不同输入设备之间出现奇怪行为的风险较小。

正如许多关于接受的解决方案（包括作者）的评论所指出的那样，依靠坐标来确定事件的起源是不可靠的。无论是否包含多少健全性检查，总有另外一种方法可以打破预期的行为。到那时，您已经为一个简单的问题设计了一个非常复杂的解决方案。

tl; dr使用两个按钮，将“提交”按钮隐藏在屏幕外。

祝你好运！

Answer 4

我有一个简单得多的答案，这避免了所有麻烦。当您听到它时，您会想到“我为什么没有想到！！”。您有2个表格。您的所有字段都以第一种形式出现，而第二种形式只是“提交”按钮。第一个的onsubmit只说“ return false;”，第二个的onsubmit调用一个函数，该函数也返回false。但是第二个表单调用的函数会手动提交包含所有字段的表单。因此，只有提交按钮提交第一个表单，而不提交任何输入字段的任何回车键。当然，用户不会有任何区别！（除了可以免于在准备好之前意外提交表格之外）

如何区分单击提交按钮和输入输入以提交表单？

4 个答案: