HTML 禁用Select下拉框的上下左右键盘按键默认事件

这几天一直在处理input和select等其他一些表单元素的控件，在使用select下拉框时由于需要键盘的上下左右做一些其他的额外任务就尝试直接给select的onkeyup事件绑定自己的方法，这时却发现select下拉框默认已经绑定了键盘的上下左右触发事件，默认的上下左右会自动切换已有的option值，如果使用onkeyup绑定自己的方法会和系统默认的方法相冲突，作为一个萌新也是各种百度查文档，结果找了很多很多文档都并没有介绍select的上下左右默认事件，通过零碎的线索挖掘出了冒泡事件、默认事件这两个关键线索！然后一开始自己也是一通乱试，结果啥也没改变o(╥﹏╥)o然后又看到了另一篇尘封已久的帖子:https://bbs.csdn.net/topics/370025090 在这里我终于发现了问题所在，原来select的默认上下左右键盘事件并不是通过onkeyup事件触发，而是onkeydown！知道了问题所在的我赶紧去试了试发现果然解决了！下面是代码：

<body><select id="a" onkeydown="a(event)"><option>第一选项</option><option>第二选项</option><option>第三选项</option><option>第四选项</option></select><script>window.onload = function(){document.getElementById("a").focus();}function a(e){var keyCode = window.event ? e.keyCode : e.which;if(e.preventDefault){if(keyCode==37||keyCode==38||keyCode==39||keyCode==40){e.preventDefault();}}else{if(keyCode==37||keyCode==38||keyCode==39||keyCode==40){window.event.returnValue == false;}}}</script></body>

通过select绑定onkeydown事件来重新获取用户输入的keyCode进行判断，如果键码为上下左右则进行阻止默认事件的发生，这样就彻底达到自己要的效果啦！这里的例子只是禁用上下左右，如果想重新利用上下左右做一些其他的事完全可以重新在select上绑定新的keyup事件进行新任务的编写！

解决了这个困扰了我一天的问题终于在这一刻被解开了，内心也是无比激动！

希望遇到同样问题屏幕前的你看完这篇文章问题得以解决也会有现在我这种心情！ヾ(◍°∇°◍)ﾉﾞ加油！

HTML 禁用Select下拉框的上下左右键盘按键默认事件相关推荐

layUI禁用select下拉框
禁用:设置为 disabled <select name="id" disabled lay-filter="industry">...</s ...
layui select下拉框改变之 change 监听事件
在layui中使用 jquery 触发select 的 change事件无效使用layui.use监听select事件 <select lay-filter="demo" ...
select 下拉框的选中项的change事件
HTML文件<span style="float: left;">类型: <select id="type" class=&qu ...
设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
html下拉框设置默认值_如何设置HTML select下拉框的默认值？
HTML中的select标签用于创建可选择选项的下拉列表:option标签包含选定时将使用的值.那么如何来设置select下拉框里的默认值?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 我们可 ...
html设置下拉筛选可以多选,select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
html 下拉框设置默认值,如何设置HTML select下拉框的默认值？
想要设置HTML select下拉框的默认值,可以在所需选项上使用"selected"属性来设置select元素的默认值,这是一个布尔属性.默认情况下,具有"select ...
如何设置HTML select下拉框的默认值？
HTML中的select标签用于创建可选择选项的下拉列表:option标签包含选定时将使用的值.那么如何来设置select下拉框里的默认值?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 我们可 ...
HTML如何设置select下拉框的默认值？
本篇文章给大家介绍设置select下拉框默认值的方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 我们可以在所需选项上使用"selected"属性来设置sel ...

HTML 禁用Select下拉框的上下左右键盘按键默认事件

HTML 禁用Select下拉框的上下左右键盘按键默认事件相关推荐

最新文章

热门文章