admin管理员组文章数量:1316323
<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>
本文标签:
版权声明:本文标题:javascript - Html "Select" tag should not open its "OPTIONS" on "Enter" bu 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742001519a2411108.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论