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

我有以下示例，轻松检测到“Enter”键并正确处理它。这是：跨浏览器处理使用javascript按下“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){不会运行，就像没有事件发生一样。

来源

2013-02-17 Sergey Shafiev

你的JS在生产和非生产方面有什么不同？ – 2013-02-17 14:57:47

如果'input'位于'form'内部，则在某些浏览器中，在input：text处按'ENTER'将提交'form'。为了防止这种情况，您需要将'event.preventDefault（）'添加到'keyup'处理程序。 – Teemu 2013-02-17 15:37:13

刚试过event.preventDefault（），它没有帮助。生产代码和冷冻消息中的代码没有区别。同一个事件，相同的代码。 – 2013-02-17 16:31:53

这个问题可以用下面的代码来处理按下“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功能。

来源

2013-02-24 12:01:43

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

回答

相关问题