一个真正的极端案例。我有一个与此类似的 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；和
- 在数据列表中选择选项时按Enter？
如果用户正在进行文本输入并意外按下 Enter，我想阻止表单提交。我的代码可以工作，但现在它还阻止用户使用 Enter 选择数据列表选项。
Chrome 没有这个问题，但我也需要它在 Firefox 上运行。
最佳答案
我的最终解决方案: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”键。
关于javascript - 防止 "enter"按键表单提交但不选择数据列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43184088/