公司项目（vue+element）有个需求，是在一个input输入内容后按下Enter键进行搜索查询，查询到得数据显示在表格，勾选表格的选中的数据进行提交（提交按钮的快捷键是Ctrl+Enter键盘），功能很常见，下面说的主要是绑定这些键盘事件和遇到的一个问题

效果如图：

在输入框中绑定键盘事件vue官网提供了键盘修饰符很方便
代码如下：

// An highlighted block
<el-input  ref="enter" clearable @keyup.enter.native="listQuery(searchForm.fphm)" v-model="searchForm.fphm" placeholder="输入发票号码后四位,按Enter键搜索"></el-input>

在按钮上绑定键盘事件你会发现要先点击一下按钮，才能触发键盘事件，这样肯定是不满足我们需求的，所以就把事件绑定到了document上：

// A code block
<el-button type="primary"  @click="handleEntry(selection)">入账</el-button>

// An highlighted block
 keyCodeForEvent() {
      let self = this
      let code = 0
      let code2 = 0
      document.onkeydown = function(e) {
        let evn = e || event
        let key = evn.keyCode || evn.which || evn.charCode
        if (key === 17) {
          self.$refs.enter.blur() // 避免enter和ctrl+enter事件同时触发
          code = 1
        }
        if (key === 13) {
          code2 = 1
        }
        if (code === 1 && code2 === 1) {
          self.handleEntry(self.selection) // 这个方法就是按下ctrl+enter触发的方法
          code = 0
          code2 = 0
        }
      }
    },

在测试的过程中发现当把焦点聚焦到input框中，键盘按下ctrl+enter会同时触发我页面中的input框中的listQuery和handleEntry两个方法，为了解决这个问题就有了上面self.$refs.enter.blur()，按下ctrl键就让页面中input框失去焦点

在补充一个监听键盘事件：

// An highlighted block
document.addEventListener('keydown',function(e){
      if(e.keyCode=='13'){
      	console.log('你按下了回车键!')
      }
    })