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

Question

我在一个页面上有几个htmlinput控件和一个搜索按钮。当用户在输入控件之外时（即焦点不在输入控件内），如果用户按enter键，我想触发搜索按钮的单击事件。搜索按钮不是提交按钮，也不在表单内

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

Answer 1

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

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