Question

在我的网站上，我可以通过按 Enter 在搜索输入字段中键入字符串，以便用户使用搜索。下面是一些jQuery代码来说明这一点：

$(document).ready(function () {
    $('#search-input').on('keydown keyup keypress', function (event) {
        event = event || windows.event;
        if (event.keyCode == 13 || event.which == 13) {
            $("#search-button").click();
        }
    });

    $("#search-button").click(function () {
        var theUrl = "/search.aspx?search=" + document.getElementById('search-input').value;
        window.location = theUrl;
    });
}

在我的母版页上，我有以下代码：

<input id="search-input" name="search" type="text" placeholder="Search..." />
<button id="search-button" type="button"></button>

虽然这适用于FireFox和IE9 / IE8，但它在Chrome中不起作用（除非在调试模式下这是令人惊讶的）。请帮助我在所有这些浏览器中正常工作。

Answer 1

通过绑定多个事件来停止复杂化，因为keypress和keyup并不总是返回相同的值，并且对于每个触发的事件，将多次调用该函数。此外，e.which在jQuery中被标准化，并且再次使你复杂化太多了：

$(document).ready(function () {
    $("#search-button").on('click', function() {
         var theUrl = "/search.aspx?search=" + $('#search-input').val();
         window.location = theUrl;
    });
    $('#search-input').on('keyup', function(e) {
         if (e.which == 13) 
            $("#search-button").trigger('click');
    });
});

Answer 2

您不需要任何JavaScript。

<form method="GET" action="/search.aspx">
    <input name="search" type="text" placeholder="Search..." />
    <button type="submit">Submit</button>
</form>

除非您特别希望该表单无法在禁用javascript的情况下使用。

重要事件在Google Chrome中无法正常运行

2 个答案: