按輸入控件外輸入鍵時如何觸發按鈕單擊

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> 

或者，由於事件傳播出去，如果您可以阻止自動完成事件在您使用的任何庫中傳播，那么這也可能有效。