跨浏览器使用javascript按下“Enter”键

时间:2013-02-17 14:46:07

标签: javascript javascript-events event-handling keyboard-events

我有以下示例,可以轻松检测到“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){没有运行,就像没有发生任何事件一样。

1 个答案:

答案 0 :(得分: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函数中。