zoukankan      html  css  js  c++  java
  • 关于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>
     
    

      

  • 相关阅读:
    21. Merge Two Sorted Lists
    20. Valid Parentheses
    19. Remove Nth Node From End of List
    18. 4Sum
    17. Letter Combinations of a Phone Number
    16. 3Sum Closest
    15. 3Sum
    14. Longest Common Prefix
    js的Dom操作
    C/S和B/S两种软件体系结构
  • 原文地址:https://www.cnblogs.com/SharkJiao/p/13580709.html
Copyright © 2011-2022 走看看