使用 Javascript 处理“Enter”键的跨浏览器答案

【问题标题】：Cross-browser handling the "Enter" key pressing using Javascript使用 Javascript 处理“Enter”键的跨浏览器
【发布时间】：2013-02-02 01:19:24
【问题描述】：

我有以下示例，可以轻松检测到“Enter”键按下并正确处理。这里是：

<!DOCTYPE html>
<html>
<head>
    <title>keyCode example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#search-input").keyup(function (event) {
                event = event || window.event;
                if (event.keyCode == 13 || event.which == 13) {
                    $("#search-button").click();
                }
            });

            $("#search-button").click(function () {
                var theUrl = "http://www.yahoo.com/"
                window.location = theUrl;
            });
        });
    </script>
</head>

<body>
    <input id="search-input" name="search" type="text"/>
    <button id="search-button" type="button" alt="Search">Search</button>
</body>
</html>

这在每个流行的浏览器中都非常适合我。问题是这段代码在我的生产环境中除了 Firefox 之外的任何浏览器都不起作用。在我的生产环境中，该脚本也内置在$(document).ready 函数中，并位于单独的“main.js”文件中。调试模式显示，当我在文本字段中输入字母或数字时，脚本运行正常。当我按下“Enter”键时，程序甚至没有进入$("#search-input").keyup(function (event){ 部分。但是文本从文本字段中消失，似乎页面重新加载。我再重复一次，该问题只能在生产站点上重现。在我上面显示的单独的本地页面上，一切正常。

有谁知道问题出在哪里？

更新：除 Enter 外，所有键均正常处理。当我按 Enter 时，$("#search-input").keyup(function (event){ 不会运行，就像没有发生任何事件一样。

【问题讨论】：

你的JS在生产端和非生产端有什么区别？
如果input 在form 内，在某些浏览器中点击input:text 上的ENTER 将提交form。为防止这种情况，您需要将 event.preventDefault() 添加到 keyup 处理程序。
刚试过event.preventDefault()，没用。生产代码和第一条消息中的代码没有区别。同样的事件，同样的代码。

标签： jquery event-handling cross-browser keyboard-events jquery-events

【解决方案1】：

使用以下处理“Enter”键的代码解决了该问题：

$("#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');
});

此代码内置于$(document).ready 函数中。

【讨论】：