按输入控件外输入键时如何触发按钮单击

Question

我在页面上有几个html input控件和一个搜索按钮。 当用户在输入控件之外时（即焦点不在输入控件内），如果用户按回车键，我想触发搜索按钮的点击事件。 搜索按钮不是“ Submit按钮，它不在form

<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />

<button type="button" id="btnSearch">Search</button>

目前我正在这样做

$(document).keypress(function (event) {
    if (event.keyCode === 13) {
        $("#btnSearch").click();
    }
})

但是，上述代码会在用户单击enter时触发click事件。

我有一些输入控件是自定义自动完成控件。 用户开始输入内容后，自动完成控制会显示多个选项。 然后，用户可以使用鼠标或按Enter键选择该选项。

当用户按Enter键选择选项时，我不想触发搜索按钮的click事件。

Answer 1

只需确保autocomplete元素不是enter press的来源。 从您在问题中提供的演示中，这将有效。 但是，如果在您的用例中略有不同，您可能需要调整类名称或选择器以确保它阻止正确的目标元素

 $(document).keypress(function (event) { if (event.keyCode === 13 && !$(event.target).hasClass("autocomplete")) { $("#btnSearch").click(); alert('btnSearchClick'); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input1" /> <input type="checkbox" id="input2" /> <input type="text" class="autocomplete" id="input3" /> <button type="button" id="btnSearch">Search</button> 

或者，由于事件传播出去，如果您可以阻止自动完成事件在您使用的任何库中传播，那么这也可能有效。