vue监听键盘事件,vue 键盘

　　本文主要介绍Vue的键盘事件，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

　　常用密钥别名：未提供别名的密钥系统。自定义键别名汇总在js中，我们通常需要通过(keydown/keyup)绑定一个事件来获取一个键的代码，然后通过默认参数事件中的keyCode属性来获取代码。如果我们要按下一个固定的键来触发一个事件，我们需要在事件中不断的做出判断，这样会很麻烦，比如

　　var input=document . query selector(“input”)

　　input.onkeyup=function (e) {

　　if (e.keyCode==13)

　　Console.log(我是回车键)

　　}

　　在vue中，一些常用的键都提供了别名，我们只需要在事件后添加相应的别名，不需要在事件中手动做出判断。

常用按键别名

　　在Vue中，一些常用的键都绑定了别名，如下。

　　向上箭头：向上向下箭头：向下向左箭头：向左向右箭头：向右空格：空格换行符：tab退出：esc回车：enter delete/back space:delete alias可以用来限制键盘事件(keydown，keyup)，只有当按下的键与别名一致时才会执行绑定事件。

　　输入v-on:keyup . enter= show tip type= text

　　showtip方法仅在按下Enter键时执行。

　　此外，tab键仅适用于keydown。在浏览器中，tab本身已经绑定了event: switch focus，所以按下并释放tab键后会触发默认事件，而keyup绑定的事件则被忽略。使用keydown可以避免这种情况，绑定的事件会在tab被按下的瞬间执行。

未提供别名的键

　　另外，vue不提供别名键，vue也为我们提供了使用方法。根据vue，没有别名的键可以被键的原始键值绑定，该键值是由event.key例如

　　var input=document . query selector(“input”)

　　input.onkeyup=function (e) {

　　console.log(e键)

　　}

　　上面的代码会在我们按下任意键的时候输出控制台中相应的键值。分别按下case切换键、Q和W键将得到以下数值

　　我们可以使用键值作为键的别名。特别是，如果键值是单个字母或单词，直接使用键值就足够了。但是如果是由多个单词组成的，比如case switch key，就是两个单词的组合。这时候要改变键值，可以使用短横线命名规则，使用caps lock-caps-lock。

　　输入v-on:keyup。Q=showtip type=text

　　//只有在按下Q键时，才会执行showtip方法

　　输入v-on:keyup . caps-lock= show tips type= text

　　showtips方法只有在按下capslock键时才会执行。

系统修饰键

　　所谓的系统修改键就是ctrl、alt、shift等。这些键的使用有点复杂，主要分为以下两种情况。

　　1.当触发事件是keyup时，只能通过在按下修饰键的同时按下其他键，然后释放其他键来触发事件。

　　输入v-on:keyup。Alt=showtips type=text

　　//按alt键，然后按任意键，再放开任意键，就会执行showtips方法。

　　//以上步骤太麻烦。我们可以这样写

　　输入v-on:keyup。Alt.y=showtips type=text

　　//当按下alt y时，会触发事件，而不是先按alt，再按Y，再按Y。

　　当触发事件为keydown时，直接按下修饰键。

　　输入v-on:按键。Alt=showtips type=text

　　//只有在按下alt键时，才会执行showtips方法

自定义按键别名

　　vue为我们提供了自定义键名别名的方法，定义为(Vue.config.keyCodes自定义键名=键码)。

　　输入v-on:keydown . en= show tips type= text

　　//只有在按下enter键时，才会执行showtips方法

　　Vue.config.keyCodes.en=13

　　//13是回车键的键码，定义他的别名为en。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。