How to trigger button click when press enter key outside of input controls

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.

Travis J · Accepted Answer · 2018-04-02 20:54:39Z

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.

@LP13 - Yes: developer.mozilla.org/en-US/docs/Web/API/Event/target However, if you must support IE6-8 then it would be required to use .srcElement instead of .targetElement (as noted in the link as well).
Should i use event.which or event.keyCode api.jquery.com/event.which
@LP13 - I personally use keyCode so it didn't seem out of place to me when you used it here. I would stick with keyCode. Here is some more info on it: stackoverflow.com/a/4471635/1026459

Collectives™ on Stack Overflow

How to trigger button click when press enter key outside of input controls

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related