vue2.0键盘事件

• 按键触发

英文输入法：

事件触发顺序：keydown - > keypress - > keyup

中文输入法：

firfox：输入触发keydown，回车确认输入触发keyup

chrome：输入触发keydown、keyup，回车确认输入只触发keydown

IE：输入触发keydown、keyup，回车确认输入触发keydown，keyup

Safari：输入触发keydown、keyup，回车确认输入触发keydown，keyup

opera：输入触发keydown、keyup，回车确认输入触发keydown，keyup

• keyup（当键盘键被松开时）

@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键

• keydown（当键盘键被按下时）

@keydown.enter 回车
@keydown.left 左键
@keydown.right 右键
@keydown.up 上键
@keydownp.down 下键
@keydown.delete 删除键

• keyCode（键值）
• html

<div id="app">
    <input type="text" name="" value="" @keyup="keyUp($event)">
    <input type="text" name="" value="" @keyup.up="upUp($event)">
    <input type="text" name="" value="" @keyup.down="upDown($event)">
    <input type="text" name="" value="" @keyup.enter="search($event)">

    <input type="text" name="" value="" @keydown="keyDown($event)">
    <input type="text" name="" value="" @keydown.up="downUp($event)">
    <input type="text" name="" value="" @keydown.down="downDown($event)">
    <input type="text" name="" value="" @keydown.enter="search($event)">
  </div>

• js

    let newlist = new Vue({
      el: '#app',
      data: {},
      methods: {
        keyUp: function(ev) {
          console.log(ev.keyCode);
        },
        upUp: function(ev) {
          console.log(ev.keyCode);
        },
        upDown: function(ev) {
          console.log(ev.keyCode);
        },
        keyDown: function(ev) {
          console.log(ev.keyCode);
        },
        search: function(ev) {
          console.log(ev.keyCode);
        },
        downUp: function(ev) {
          console.log(ev.keyCode);
        },
        downDown: function(ev) {
          console.log(ev.keyCode);
        },
      },

    })