跨瀏覽器處理使用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」鍵

回答

相關問題