For a menu in html, clicking on the select will show the drop down with options, but how would I trigger this by clicking on the enter key. I have tried setting up a keyup listener which would then trigger the 'click' event, but the menu is not showing up

For a menu in html, clicking on the select will show the drop down with options, but how would I trigger this by clicking on the enter key. I have tried setting up a keyup listener which would then trigger the 'click' event, but the menu is not showing up

• javascript
• html
• backbone.js
• marionette

Share Improve this question Follow asked May 19, 2019 at 23:24 Tenzin ChoklangTenzin Choklang 52322 gold badges55 silver badges2424 bronze badges 1

• This is not currently possible unfortunately: stackoverflow./questions/6992639/… – aprouja1 Commented May 19, 2019 at 23:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Why not try an easier approach? Select opens when you hit enter when it has focus on it, so basically you need only to autofocus when the page load. Example:

<select id="dropdown" autofocus class="" name="">
 <option value="">Opt1</option>
 <option value="">Opt2</option>
 <option value="">Opt3</option>
</select>

If you still want to trigger the event EVERY time enter is hitted, you can do this:

window.addEventListener('keypress', function (e) {
 if (e.keyCode == 13) {
  document.getElementById("dropdown").focus();
 }
}, false);

Basically, select gain focus when you hit enter, then you can hit again to open it.

To answer my own question, the options are opened by using either the up/down arrow keys once the field is in focus. Its something that is build in the html, so no need to create separate listeners for it