保定网站建设工作,文章列表插件wordpress,杭州巴顿设计公司官网,网络服务平台技术包括文章目录 前文提要键盘事件#xff08;并不是所有按键都能绑定键盘事件#xff09;常用的按键不同的tab和四个按键keyCode绑定键盘事件#xff08;不推荐#xff09;Vue.config.keyCode.自定义键名 键码 神奇的猜想div标签和click.enterbutton标签和click.enter 前文提要 … 文章目录 前文提要键盘事件并不是所有按键都能绑定键盘事件常用的按键不同的tab和四个按键keyCode绑定键盘事件不推荐Vue.config.keyCode.自定义键名 键码 神奇的猜想div标签和click.enterbutton标签和click.enter 前文提要
本人仅做个人学习记录如有错误请多包涵 键盘事件并不是所有按键都能绑定键盘事件
如何设置键盘事件代码如下keydown可以改为keyup
bodydiv idbox键盘事件input typetext keydown.entershowInfo/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo() {console.log(触发了)}}})/script
/body当你点击输入框之后按下回车键就会在控制台输出’触发了’
常用的按键 回车已经介绍过了如果你将上文代码中的enter改为delete那么当你选中了输入框的时候按下backspace退格和delete删除都会触发键盘事件。
不同的tab和四个按键
其中tab键有所不同你使用keyup触发事件是无效的只能使用keyup 同样特殊的还有一下四个按键。 验证代码如下 当你选中输入框按下和松开alt的时候并不会触发键盘事件。 当你按住alt并且按下其他按键的时候才会触发键盘事件调用回调函数。
keyCode绑定键盘事件不推荐
当你不知道这个按键的名字的时候也可以用按键对应的数值来绑定键盘事件 可以通过下述代码获取按键对应的keyCode代码如下
bodydiv idbox键盘事件input typetext keydown.caps-lockshowInfo/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo() {console.log(event.key,event.keyCode)}}})/script
/body向CapLock这种由两个单词组成的按键需要将单词首字母全部变为小写且用’-隔开才能使用。 有图可知这个CapsLock按键对应的key值是20我们也就可以用如下代码代替上文代码中的这个部分也可以起到相同的效果。 但是不推荐因为key值是被废弃的特性可以在该链接中看见 KeyboardEvent.keyCode keyCode绑定键盘事件代码如下
div idbox键盘事件input typetext keydown.20showInfo
/divVue.config.keyCode.自定义键名 键码
建码就是按键对应的keyCodeenter回车对应13。
代码如下
bodydiv idbox键盘事件input typetext keydown.huicheshowInfo/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo() {console.log(event.key,event.keyCode)}}})Vue.config.keyCodes.huiche 13;/script
/body自定义键名’huiche’使得输入框绑定回车键 神奇的猜想
div标签和click.enter
div click.entershowInfo stylebackground-color:red点我触发事件/div鼠标点击div标签触发事件 此时按下或是按住都不会触发键盘事件都不会在控制台输出’触发了’
button标签和click.enter
如果将代码改为
button click.entershowInfo点我触发事件/button鼠标点击按钮能够触发事件 这很正常因为触发了鼠标点击事件。 如果你的鼠标放在按钮以外的位置按下回车键的时候无法在控制台输出1这很正常。 但是如果你把鼠标放在按钮之上不点击只是放着按下回车键则会触发事件在控制台输出1这就不是很正常了。
所以键盘事件最好还是配合keydown和keyup这些事件进行使用。 且这些元素能够被“选中”能够让系统知道你此时选择了这个元素。 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
