Vue笔记_08(键盘事件)

1）键盘事件

以 input 框为例：

<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">

其中需要绑定一个method:“showInfo”(即按下键则触发函数执行)：

methods: {
               showInfo(e) {
                 if (e.keyCode != 13) return//方法1：只有按了enter才执行后面代码，否则直接返回
                   console.log(e.keyCode)//e.keyCode获取按键编码(enter键的编码是13)
                   console.log(e.target.value)//获得按下的值
               }
          }

e.keyCode：获取按键编码

e.target.value：获得按下的值

keyup和keydown区别：

        keyup:按下到松手才触发

        keydown:只要按下就触发 

如何绑定单独按键：

方法1：在函数showInfo中，加入判断 if (e.keyCode != keyCode) return 

方法2：利用keyup/keydown.键名

vue提供九种按键别名，如下：

 那如何获取除这九种以外的键盘名字呢:

 e.key:可以得到按键的名字

特殊地，切换大小写CapsLock由多个单词组成，绑定时需要小写， 同时之间加-，如：keyup.caps-lock。

<!-- 并不是所有按键都能绑定事件，如放大小音量等 -->

特殊按键tab键：

         tab作用就是把焦点从当前元素切走，那么使用keyup时，只要按tab键就已经失去对元素获取焦点，因此不适合用keyup，用keydown。

特殊按键win，alt，shift，ctrl（系统修饰键）

        1.配合keyup 使用：按下当前键的同时，再按下其他键， 随后释放其他键，事件才被触发。

        2.配合keydown 使用：正常触发

使用按键编码绑定事件（不推荐）

        如：@keyup.13(绑定enter键)

自定义别名：

        Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

        如：Vue.config.keyCodes.huiche=13(绑定enter键同时别名为huiche)