Question

使用这样的简单输入和数据集合组合：

<input type="text" class="form-control dropdown-input" id="standardInput" name="standardInput" tabindex="7" list="listForStandardInput"/>
<datalist id="listForStandardInput"></datalist>

我想启用键盘导航和选择。当焦点位于输入元素内部时，我可以使用向上/向下箭头键进行选择，但是当我按下回车键时，会发生表单提交。

当我使用基于jQuery的JavaScript尝试阻止表单仍然提交时。

$(function () {
    'use strict';
    $('#standardInput').on('keypress', function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();
        }
    }); 
});

无论如何我可以允许使用enter键来选择与输入元素绑定的datalist元素吗？

Answer 1

尝试使用e.which而不是e.keyCode。

$(function () {
    'use strict';
    $('#standardInput').on('keypress', function (e) {
        if (e.which == 13) {
            e.preventDefault();
        }
    }); 
});

Answer 2

请尝试使用keyup()：

$("#standardInput").keyup(function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();            
    }
});

使用回车键选择与输入关联的Datalist元素

2 个答案: