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

Question

I have several html input controls on a page and a search button. When user is outside the input controls, ( ie focus is not inside the input control) and if user press enter, i want to trigger click event of search button. The search button is not a Submit button and it is not inside a 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>

currently I am doing this

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

However, the above code triggers click event every time user clicks enter.

Some of the input controls I have are custom autocomplete controls. Auto complete control shows multiple options as soon user starts typing something. Then user can select the option by using mouse or by pressing enter.

I don't want to trigger the click event of a search button when user press enter to select an option.

Answer 1

Just make sure that the autocomplete element isn't the source of the enter press. From the demo you give in your question, this will work. However, if it is slightly different in your use case, you may need to adjust the class name or selector to make sure it is preventing the correct target element

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

Alternatively, since events propagate out, if you can prevent the propagation of the autocomplete event in whichever library you are using, that may work as well.