javascript - 在输入控件外按下回车键时如何触发按钮单击

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();
    }
})

但是，上面的代码会在用户每次点击进入时触发点击事件。

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

我不想在用户按回车键选择选项时触发搜索按钮的 click 事件。

Answer 1

只需确保自动完成元素不是回车键的来源。从您在问题中提供的演示中，这将起作用。但是，如果它在您的用例中略有不同，您可能需要调整类名或选择器以确保它阻止了正确的目标元素

$(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>

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