Vue中监听键盘事件

vue中监听键盘事件参考以下链接：

https://blog.csdn.net/xiaxiangyun/article/details/80404768

在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。

 

在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

另外，Vue中还支持组合写法：

注意
但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如：

<el-input
  v-model="inputName"
  placeholder="搜索你的文件"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

如果遇到.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档：将原生事件绑定到组件。

普通的js监听键盘事件

<script language="javascript">
//Ctrl+s保存
function document.onkeydown()   {
    if (event.ctrlKey == true && event.keyCode == 83) {//Ctrl+S 
        event.returnvalue = false;
        $("btnSave").click(); //ID
    }
    if (event.ctrlKey == true && event.keyCode == 90) {//Ctrl+Z
        event.returnvalue = false;
        $("btnSave1").click(); //ID
    }
    if (event.ctrlKey == true && event.keyCode == 89) {//Ctrl+Y恢复
        event.returnvalue = false;
        $("btnRecover").click(); //ID
    }
    if (event.ctrlKey == true && event.keyCode == 67) {//Ctrl+C
        event.returnvalue = false;
        $("btnCopy").click(); //ID
    }
    if (event.ctrlKey == true && event.keyCode == 79) {//Ctrl+N
        event.returnvalue = false;
        window.location.href="SetInfo.aspx?ChId=1&ColId=1"; //ID
    }
}
</script>