Vue框架学习笔记——键盘事件

本文介绍: 简单介绍一下Vue中的键盘事件，为key down和key up 事件绑定按键。

本人仅做个人学习记录，如有错误，请多包涵

&lt;body&gt;
  <div id="box"&gt;
    键盘事件：<input type="text" @keydown.enter="showInfo"&gt;
  </div&gt;
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      methods: {
        showInfo() {
          console.log('触发了')
        }
      }
    })
  </script>
</body>

当你点击输入框之后，按下回车键，就会在控制台输出’触发了’
在这里插入图片描述

在这里插入图片描述

回车已经介绍过了，如果你将上文代码中的enter改为delete，那么当你选中了输入框的时候，按下b ack s p a ce（退格）和delete（删除）都会触发键盘事件。

<body>
  <div id="box">
    键盘事件：<input type="text" @keydown.caps-lock="showInfo">
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      methods: {
        showInfo() {
          console.log(event.key,event.keyCode)
        }
      }
    })
  </script>
</body>

<div id="box">
    键盘事件：<input type="text" @keydown.20="showInfo">
</div>

<body>
  <div id="box">
    键盘事件：<input type="text" @keydown.huiche="showInfo">
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      methods: {
        showInfo() {
          console.log(event.key,event.keyCode)
        }
      }
    })
    Vue.config.keyCodes.huiche = 13;
  </script>
</body>

<div @click.enter="showInfo" style="background-color:red">点我触发事件</div>

<button @click.enter="showInfo">点我触发事件</button>

如果你觉得这篇文章写的不错，多多点赞~收藏吧！

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

事件按键键盘

文章 目录

前文提要

键盘事件（并不是所有按键都能绑定 键盘事件）

常用的按键

不同的tab和四个按键

keyCode绑定 键盘事件（不推荐）

Vue.config.keyCode.自定义键名 = 键码

神奇的猜想

div标签和click.enter

button 标签和click.enter

发表回复取消回复

前文提要

键盘事件（并不是所有按键都能绑定键盘事件）

常用的按键

不同的tab和四个按键

keyCode绑定键盘事件（不推荐）

Vue.config.keyCode.自定义键名 = 键码

神奇的猜想

div标签和click.enter

button标签和click.enter

相关文章

发表回复 取消回复

button 标签和click.enter

发表回复取消回复