关于Vue的键盘事件 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type='text/javascript' src='./js/jquery.js'></script>
  <script type='text/javascript' src='./js/vue.js'></script>
</head>
<body>
<div id="box">
  <input type="text" v-on:keydown.prevent="show($event)">
  <input type="text" @keyup.13='showSimple()'>
  <input type="text" @keyup.enter='showDef()'>
  <input type="text" v-on:keydown.f5.prevent='showF5()'>
</div>
<script type="text/javascript">
    Vue.config.keyCodes.f5 = 116;
    var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            show: function (ev) {
                // 获取键盘按键ASCII码值
                console.log(ev.keyCode)
            },
            showSimple: function(){
                // ASCII码值调用键盘按键
                console.log('13是回车键');
            },
            showDef: function(){
                // 系统预定值调用键盘按键
                console.log('enter是回车键');
            },
            showF5: function(){
                // 用户自定义值调用键盘按键
                console.log('我是F5啊');
            }
        }
    })
</script>
</body>
</html>

　　

posted @ 2020-08-29 07:26  wing1377  阅读(259)  评论(0)    收藏  举报