VUEJS项目实践四之自定义键盘指令（按键即获取焦点）

最新推荐文章于 2023-09-04 11:06:48 发布

Yolanda_NuoNuo

最新推荐文章于 2023-09-04 11:06:48 发布

阅读量1k

点赞数 4

分类专栏： VueJs 文章标签： vue js dom vue.js

本文链接：https://blog.csdn.net/Yolanda_NuoNuo/article/details/104622638

版权

本文介绍了如何在VueJS项目中自定义键盘指令，以便在按键时自动定位DOM节点并获取焦点。首先，作者展示了VueJS内置的按键指令，然后详细讲解了如何创建一个全局指令，监听键盘事件，通过属性`bind_key`匹配DOM元素，并在按下特定键时获取焦点。文章还提到了键码映射表和组合键的支持，以及实际应用中的注意事项。

摘要由CSDN通过智能技术生成

上回书说到怎么在vue.js中添加bootstrap样式，这次来写一下键盘按键指令吧～
一、先来说一下vue.js本来就有的按键指令吧～
这个就灰常的简单和方便啦～
1、随便找一个vue页面文件，在<template>标签里写一个测试用的输入框

<div>
    <input type="text" @keyup.13="showDialog()">
</div>

哇～这个代码的样式就都是这么丑的吗？！我选了半天就选不到一个好看的！
好吧，我要冷静，不要总是这样挑剔～

这里用到的是enter键
很明显这边有个方法showDialog()

2、在<script>标签内写方法showDialog()

<script>
    export default {
   
        data() {
   
            return {
   msg: '大家好！我是第一个页面的第一个视图'}
        },
      methods:{
   
        showDialog: function () {
   
          alert("哦豁！你按了enter键")
        }
      }
    }
</script>

3、好啦，看下效果
在这里插入图片描述
将焦点定位在输入框（重点，这句话要考！）
按enter键
就会弹出提示框

是不是灰常的简单～

除了刚才写的enter键，自然还有许多键，直接看官网就好啦！
vue.js官网按键码

到这里并没有结束～
要是就这么简单我还专门写一篇博客我是闲的嘛？

前面说了一个重点，需要将焦点定位在输入框，才可以用键盘的按键事件。
这个不满足我的需求～
我的用户群体是没有鼠标的，他们要求使用全键盘～其实操作熟练的情况下，用键盘比鼠标快。

所以本文的重点就是，在按下键盘的那一刻，就可以自动定位到dom节点并获取焦点，触发事件。

二、自定义键盘指令，按键获取焦点
其实这个思路就是顺着dom节点来查找和匹配。

不行🙅‍♂️我好困啊，都快12点了，明天或者改天再写吧～
在这里插入图片描述
～～～～～～～～～～～～～～～～～
我肥来更新博客啦～
～～～～～～～～～～～～～～～～～
这几天好忙呀，疫情期间远程办公比以前在公司难多了，钉钉上各种打卡、签到、填表，还有各种统计、计划、汇报、开会和总结，琐碎的事情让人觉得好疲惫哦～让我几乎没有自己学习和思考的时间。
感觉自己变成了一个莫得感情的填表机器。

回到正题
第一步，要定义一个全局指令，监听键盘事件；
第二步，为每个需要绑定键盘按键的dom加一个属性，bind_key；
第三步，监听键盘按键，查找页面上与之匹配的dom元素属性，成功匹配后，获取dom元素的id并定位焦点；
第四步，你想啊，都拿到id了还不是想干嘛就干嘛～

来写代码吧！
1、目录/src/directives/下，新建一个keyDirective.js

/**
 *@Author:Yolanda
 *@Date: 2020/3/2 11:46 PM
 *https://blog.csdn.net/Yolanda_NuoNuo
 */
import Vue from 'vue'

Vue.directive('keyBindListen', {
   
  bind: function (el, binding) {
   
    document.onkeydown = function (e) {
   
      var ev = window.event || e;
      var curkey = ev.keyCode || ev.which;

      $('[bind_key]').each(function (e) {
   
        if (curkey === $(this).attr('bind_key')){
   
          $('#' + $(this).attr('id')).focus();
          $('#' + $(this).attr('id')).click();
        }
      })

最低0.47元/天解锁文章