<select>
<option></option>
<option></option>
<option></option>
</select>
I have a Select element, So usually when the control "focus" in in Select element and then we hit Enter Button so the OPTION is shown. So my issue is that I dont want to open it on Enter Press , I only want to open Select element throught Mouse click.
<select>
<option></option>
<option></option>
<option></option>
</select>
I have a Select element, So usually when the control "focus" in in Select element and then we hit Enter Button so the OPTION is shown. So my issue is that I dont want to open it on Enter Press , I only want to open Select element throught Mouse click.
Share Improve this question edited Apr 11, 2018 at 12:51 CodingFriend asked Apr 11, 2018 at 12:23 CodingFriendCodingFriend 1491 silver badge13 bronze badges 5- 1 So what do you want to achieve? – Cuong Vu Commented Apr 11, 2018 at 12:25
- select elememnt options only open on click, on control focus it is not opened. – vishu Commented Apr 11, 2018 at 13:08
- @vishnu, do you want to stop the user to access the select tag using the keyboard or specifically "enter"? because using arrow keys will also open up the options – Rajnish Commented Apr 11, 2018 at 13:14
- I want it to open only with mouse click but not with keyboard enter hit. – CodingFriend Commented Apr 11, 2018 at 13:25
- Maybe there is some valid use case for this, but generally keyboard navigation is a must-have to all applications. A best practice is to always consider accessibility (e.g. ADA) – Pateta Commented Oct 25, 2021 at 22:27
4 Answers
Reset to default 5Note that keyboard accessibility is one of the core tenants of accessibility on the web. By disabling the ability for users to open selects you are rendering your UI unusable by people with disabilities who may not be able to use a regular mouse/trackpad.
Browsers do the right thing by default, please don't work against them!
Use Event.preventDefault() to prevent default action taken by browser, this should prevent the select element open when space or enter pressed.
vanilla js
document.querySelector("select").addEventListener("keypress", function(event) {
event.preventDefault();
});
jQuery
$('select').keypress(function (e) {
e.preventDefault();
})
You can listen to the keydown event and prevent the default action if the enter key is pressed. You can check if it's the enter key by checking the key, keyCode or which based on browser patibility.
e.g.
document
.getElementById("select")
.addEventListener("keydown", function(e) {
if (e.key === "Enter" || (e.keyCode || e.which) === 13)
e.preventDefault();
});<select id="select">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>If I understand your question what you think..., this may be the answer:
<html>
<head>
<title>Single Listbox Select Element</title>
</head>
<body>
<select size="2" style="height:1.5em;width:3em">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</body>
</html>