Question

当用户按下返回键时，我正在使用keyup事件触发与单击搜索按钮相同的事件。单击搜索按钮时，它会使用Ajax请求在页面上加载搜索结果。

该通话工作正常，但是当我在之前专注于输入框之后按下谷歌浏览器中的地址栏中的返回按钮时，正在捕获该键盘事件，例如，如果用户输入搜索查询而不按回车键，而是使用Google Chrome地址栏转到新网页，当他们按地址栏上的返回时，我的页面中的搜索将与keyup事件同时提交正在触发，即使页面，当然还有输入框，应该不再具有焦点。

的JavaScript

$("#search-box").on("keyup", function(event) {
   if(event.keyCode == 13){
       $("#search-submit-btn").click();
   }
});

HTML

<div class="input-append"/>
   <input id="search-box" type="text" />
   <button class="btn" id="search-submit-btn">Search</button>
</div>

我也使用Twitter引导来设置输入框的样式，但我不认为这会导致问题。

我在Firefox和Safari中测试过这个页面没有任何问题。谷歌浏览器是否存在密钥事件问题/这是一个已知问题吗？我很难找到有关这个问题的任何信息。

修改

我认为我已经通过使用keydown而不是keyup解决了我的问题。我还在检查中是否仍然关注元素，但我不认为这会产生影响，因为它仍然与keyup具有相同的影响。

$("#search-box").on("keydown", function(event) {
    if($("#search-box").is(":focus")){
        if(event.keyCode == 13){
            $("#search-submit-btn").click();
        }
    }
});

这对我来说似乎是一个不错的解决方案，但它并不能解释为什么keyup在Google Chrome中表现得如此奇怪。如果有人在谷歌浏览器中有关于为什么密钥更换的信息，或者我只是做错了什么，我会非常有兴趣听到。

Google Chrome地址栏捕获文本输入框的Keyup事件

0 个答案: