Question

一个真正的角落案例。我有一个类似于这样的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。

Answer 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”按键后立即捕获提交事件。但在进行datalist选择时不会影响“Enter”键。

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

1 个答案: