防止“输入”键按下表单提交但不是数据列表选择答案

【问题标题】：Prevent "enter" keypress form submission but not datalist selction防止“输入”键按下表单提交但不是数据列表选择
【发布时间】：2017-08-28 06:54:17
【问题描述】：

一个真正的角落案例。我有一个类似于这样的 HTML 表单：

<html>
<script>
function captureEnter(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
}
</script>
<form>
<datalist id="some-data">
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</datalist>
<input list="some-data" name="hello" onkeydown="captureEnter" />
</form>
</html>

你可以试试这个fiddle。

在 Firefox 上，有没有办法区分以下事件：

在聚焦文本字段时按 Enter；和
在 datalist 中选择选项时按 Enter？

如果用户正在输入文本并意外按下 Enter，我想阻止表单提交。我的代码有效，但现在它也阻止用户使用 Enter 来选择 datalist 选项。

Chrome 没有这个问题，但我也需要它才能在 Firefox 上工作。

【问题讨论】：

从这个link尝试@chillichief回答
谢谢。但不是我想解决的问题。我想阻止在输入字段中提交表单。我的代码有效，但现在它阻止了数据列表的选择。
试试这个小提琴link希望这有帮助
@vikscool：刚试过。您的代码中的 HTML 缺少表单标记和提交按钮。当我将所有这些都添加回来时，它并没有按我的意愿工作。我可以简单地在文本字段中按“Enter”来提交表单（我想阻止）。你可能会看到它在运行here。

标签： javascript html firefox dom-events

【解决方案1】：

我的最终解决方案：https://jsfiddle.net/yookoala/ya3pcuLd/

它的Javascript：

document.getElementById("input").onkeydown = function(e) {
  if ((e.keyCode == 13) && (typeof this.form != "undefined")) {
    // get the element's parent form object
    // capture the parent form submit event and supress it
    this.form.addEventListener('submit', function (e) {
      e.preventDefault();
    }, {"once": true});
  }
}

这将在“Enter”键按下后立即捕获提交事件。但不影响数据列表选择时的“Enter”键。

【讨论】：