vue键盘绑定Ctrl+方向键移动光标位置

最新推荐文章于 2024-01-09 18:37:00 发布
最新推荐文章于 2024-01-09 18:37:00 发布
阅读量1.3k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_60678589/article/details/123653995
版权
本文介绍如何在Vue应用中使用键盘事件监听器，实现Ctrl+左右上下键来移动光标焦点，涉及的方法包括goRight, goLeft, goUp, goDown，适用于多个输入元素间的焦点切换。" 88690448,8312262,PDF文件快速添加书签指南,"['应用技巧', 'PDF处理', '文件管理']

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 1.绑定@key事件

<el-input

                            style="width: 210px"

                            type="text"

                            v-model="item.elementNm"

                            :id="forId('elementNm', scope.$index)"

                            @keyup.ctrl.right.native="

                              goRight('elementNm', scope.$index)

                            "

                            @keyup.ctrl.left.native="

                              goLeft('elementNm', scope.$index)

                            "

                            @keyup.ctrl.up.native="

                              goUp('elementNm', scope.$index)

                            "

                            @keyup.ctrl.down.native="

                              goDown('elementNm', scope.$index)

                            "

></el-input>

2.绑定方法

methods: {

    goRight(name, index) {

      if (name == "optType") {

        if (document.getElementById("elementType" + index.toString()) != null) {

          document.getElementById("optType" + index.toString()).click();

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("elementType" + index.toString()).focus();

        } else if (

          document.getElementById("elementNm" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).click();

          document.getElementById("elementNm" + index.toString()).click();

          document.getElementById("elementNm" + index.toString()).focus();

        } else if (

          document.getElementById("elementId" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).focus();

        } else if (

          document.getElementById("elementGetWay" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementOptWay" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).focus();

        } else if (

          document.getElementById("optVal" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).focus();

        }

      } else if (name == "elementType") {

        if (document.getElementById("elementNm" + index.toString()) != null) {

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("elementNm" + index.toString()).click();

          document.getElementById("elementNm" + index.toString()).focus();

        } else if (

          document.getElementById("elementId" + index.toString()) != null

        ) {

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).focus();

        } else if (

          document.getElementById("elementGetWay" + index.toString()) != null

        ) {

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementOptWay" + index.toString()) != null

        ) {

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).focus();

        } else if (

          document.getElementById("optVal" + index.toString()) != null

        ) {

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).focus();

        }

      } else if (name == "elementNm") {

        if (document.getElementById("elementId" + index.toString()) != null) {

          document.getElementById("elementNm" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).focus();

        } else if (

          document.getElementById("elementGetWay" + index.toString()) != null

        ) {

          document.getElementById("elementGetWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementOptWay" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).focus();

        } else if (

          document.getElementById("optVal" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).focus();

        }

      } else if (name == "elementId") {

        if (

          document.getElementById("elementGetWay" + index.toString()) != null

        ) {

          document.getElementById("elementId" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementOptWay" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).focus();

        } else if (

          document.getElementById("optVal" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).focus();

        }

      } else if (name == "elementGetWay") {

        if (

          document.getElementById("elementOptWay" + index.toString()) != null

        ) {

          document.getElementById("elementGetWay" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).focus();

        } else if (

          document.getElementById("optVal" + index.toString()) != null

        ) {

          document.getElementById("elementGetWay" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).focus();

        }

      } else if (name == "elementOptWay") {

        if (document.getElementById("optVal" + index.toString()) != null) {

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("optVal" + index.toString()).focus();

        }

      } else if (name == "optVal") {

        document.getElementById("optType" + index.toString()).focus();

      }

    },

    goLeft(name, index) {

      if (name == "optVal") {

        if (

          document.getElementById("elementOptWay" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("elementOptWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementGetWay" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementId" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).focus();

        } else if (

          document.getElementById("elementNm" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("elementNm" + index.toString()).focus();

        } else if (

          document.getElementById("elementType" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("elementType" + index.toString()).focus();

        } else if (

          document.getElementById("optType" + index.toString()) != null

        ) {

          document.getElementById("optVal" + index.toString()).click();

          document.getElementById("optType" + index.toString()).focus();

        }

      } else if (name == "elementOptWay") {

        if (

          document.getElementById("elementGetWay" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementGetWay" + index.toString()).focus();

        } else if (

          document.getElementById("elementId" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementId" + index.toString()).focus();

        } else if (

          document.getElementById("elementNm" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementNm" + index.toString()).focus();

        } else if (

          document.getElementById("elementType" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("elementType" + index.toString()).focus();

        } else if (

          document.getElementById("optType" + index.toString()) != null

        ) {

          document.getElementById("elementOptWay" + index.toString()).click();

          document.getElementById("optType" + index.toString()).focus();

        }

      } else if (name == "elementGetWay") {

        if (document.getElementById("elementId" + index.toString()) != null) {

          document.getElementById("elementId" + index.toString()).focus();

        } else if (

          document.getElementById("elementNm" + index.toString()) != null

        ) {

          document.getElementById("elementNm" + index.toString()).focus();

        } else if (

          document.getElementById("elementType" + index.toString()) != null

        ) {

          document.getElementById("elementType" + index.toString()).focus();

        } else if (

          document.getElementById("optType" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).focus();

        }

      } else if (name == "elementId") {

        if (document.getElementById("elementNm" + index.toString()) != null) {

          document.getElementById("elementNm" + index.toString()).focus();

        } else if (

          document.getElementById("elementType" + index.toString()) != null

        ) {

          document.getElementById("elementType" + index.toString()).focus();

        } else if (

          document.getElementById("optType" + index.toString()) != null

        ) {

          document.getElementById("optType" + index.toString()).focus();

        }

      } else if (name == "elementNm") {

        if (document.getElementById("elementType" + index.toString()) != null) {

          document.getElementById("elementNm" + index.toString()).click();

          document.getElementById("elementType" + index.toString()).focus();

        } else if (

          document.getElementById("optType" + index.toString()) != null

        ) {

          document.getElementById("elementNm" + index.toString()).click();

          document.getElementById("optType" + index.toString()).focus();

        }

      } else if (name == "elementType") {

        if (document.getElementById("optType" + index.toString()) != null) {

          document.getElementById("elementType" + index.toString()).click();

          document.getElementById("optType" + index.toString()).focus();

        }

      } else if (name == "optType") {

        if (document.getElementById("optVal" + index.toString()) != null) {

          document.getElementById("optVal" + index.toString()).focus();

        }

      }

    },

    goUp(name, index) {

      var cnt = this.caseOptList.length;

      var n = 0;

      var a = 1;

      if (index == 0) {

        for (n; n <= cnt; n++) {

          if (document.getElementById(name + (cnt - n).toString()) != null) {

            document.getElementById(name + "0".toString()).click();

            document.getElementById(name + (cnt - n).toString()).focus();

            return;

          }

        }

      } else {

        for (a; a <= cnt; a++) {

          if (document.getElementById(name + (index - a).toString()) != null) {

            document.getElementById(name + (index - a + 1).toString()).click();

            document.getElementById(name + (index - a).toString()).focus();

            return;

          }

        }

      }

    },

    goDown(name, index) {

      var cnt = this.caseOptList.length;

      var n = cnt;

      var a = 1;

      if (index == cnt - 1) {

        for (n; n >= 0; n--) {

          if (document.getElementById(name + (cnt - n).toString()) != null) {

            document.getElementById(name + (cnt - 1).toString()).click();

            document.getElementById(name + (cnt - n).toString()).focus();

            return;

          }

        }

      } else {

        for (a; a <= cnt; a++) {

          if (document.getElementById(name + (index + a).toString()) != null) {

            document.getElementById(name + (index + a - 1).toString()).click();

            document.getElementById(name + (index + a).toString()).focus();

            return;

          }

        }

      }

    },

    forId(name, index) {

      return name + index;

    },

VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 6136
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
关于在vue2.6+ts技术栈下高德地图API的使用方法
weixin_42833042的博客
01-20 3527
最近公司某个项目用上了vue2.6+typescript的技术栈，整个工程都是用vue-cli3直接生成的，自带了ts-loader来解析ts文件，非常方便。但是对于一些没有没有声明文件的第三方模块，用起来会比较麻烦，过程中，我们用到的高德地图就是其中之一，虽然官方推荐使用vue-amap，但是想追求粒度更细的操作，还是原生的api更为方便，下面来记录一下全程的配置过程。 一、引入api文件 ...
vue如何通过键盘方向键切换input焦点
大连海大
03-05 5246
功能介绍 vue方向键插件，适合键盘的快捷键操作，通过键盘在input间切换，应用在后台系统开单，财务等等的快速输入和保存上，使用简单，配置方便 使用方法 安装npm install --save vue-direction-key 使用 在入口文件中引用 import Direction from 'vue-direction-key' Vue.use(Direction) 在模...
VUE的键盘事件
weixin_43228946的博客
08-30 1820
按键修饰符
vue 键盘（上下左右）快捷键
weixin_60382322的博客
03-10 3524
keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。 keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。 keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。 在mounted中加上window.addEventListener(“keydown”, this.KeyDown);监听 mounted
vue学习之elementUI组件数字输入框光标上移
King的博客
10-30 1823
问题描述：使用elementUI组件的数字输入框时，键盘输入内容时按shift键时，光标上移！ 解决：给input设置line-height:1;
光标的定位与获取
03-20
2. 键盘操作：使用方向键或组合键（如Ctrl + Arrows）可以在文本编辑器中移动光标，Home和End键可使光标跳转到行首或行尾。 3. 编程控制：在编程环境中，可以通过API函数（如Windows API中的SetCursorPos或C#的...
Vue.js与CodeMirror的完美搭档：下一代代码编辑体验（5大升级功能）
最后，本文展望了Vue.js与CodeMirror的未来发展方向，以及社区在其中所扮演的角色。 # 关键字 Vue.js；CodeMirror；集成实践；性能优化；安全性；社区发展 参考资源链接：[Vue+Codemirror: 实
mes项目 组态开发项目reademe文档 待整理
77今天也学习了的博客
03-19 2738
vue2 项目 ========= vue cmd命令所包含知识点： 清除缓存：npm cache clean --force 当npm install无效，需要进行npm cache clean --force命令操作， 如果这样操作不成功的话，去C盘清空一个文件夹： C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除 再重新npm install #删除node_modules npm cache clean --force
vue实现点击鼠标左右移动元素
最新发布
早晚的博客
01-09 813
【代码】vue实现点击鼠标左右移动元素。
vue 鼠标移动框选和按住CTRL选
weixin_45150521的博客
09-16 4637
vue类似与window上多选文件css代码js代码 前言：因为这是个文件管理系统，替代用户原来的ftp系统。 用户在原来的系统里面习惯的的操作要在新系统中体现，特别是鼠标框选之类的操作。 效果图： 第一个是框选效果，第二个是按住CTRL后鼠标左键选择的效果。 代码是纯js写的，ps:主要是没找到合适的vue框选效果 html代码： 一定要看好层级关系 第一个红框中右两个事件，mouseup鼠标抬起事件，mousedown.left是鼠标左键点击事件 第二个红框中的style必须设置，这个div是与框选
vue 上下键li_解决页面需要上下左右选中元素的问题，富操作__Vue.js
weixin_35801556的博客
01-17 1188
前言纯粹是因为无聊吧，然后就是突发奇想。我以前开发过web端的收银系统。之前更早的时候也是做过零售软件方面的实施，通常在门店的时候收银员为了更为快速的去收银，是很少会去用鼠标的。都是键盘解决。但是web操作系统页面有一个问题。就是你的通过tab等方式其实不是很方便。然后我们还有商品列表也需要通过键盘方式选中返回。如果通过鼠标，在一些门店每天都是几万的销售额中，是非常累人，且效率低下的。这次开发的这...
Vue常用按键别名【监听事件】
qq_22841387的博客
03-24 4112
通过本文的讲解，我们了解了如何在 Vue.js 中监听不同的键盘事件，并针对每种常见按键给出了详细的代码示例和注意事项。希望这些内容能帮助你更深入地理解 Vue.js 中的键盘事件处理，从而为你的应用提供更好的用户体验。在实际项目中，合理使用键盘事件监听可以使用户操作更自然、更流畅。记得结合业务逻辑和用户体验需求来定制你的事件处理方案！
el-form表单实现点击上下左右方向键移动聚焦
Is_Xiao_Gu的博客
02-23 1476
el-form表单元素实现上下左右箭头移动聚焦
vue+element 实现表格，键盘上下键选择某一行，并选中
weixin_48604432的博客
12-31 4689
1.直接上代码 <template> <div> <el-form label-width='0.5rem' style='display:flex' class='fromclass aline'> <el-form-item label="公司" required> <el-input style='width:1.6rem' v-model="purchase" autocomplete="off" @keyup.native.
vue中将光标定位到Input上的问题
agwq1908的博客
01-08 3861
1 <template> 2 <div class="person_email"> 3 <div class="contain_email"> 4 <x-header :left-options="{backText: ''}">修改邮箱</x-header&g...
Vue按键修饰符,鼠标按钮修饰符
qq_1872583947的博客
01-26 653
在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。 在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。 按键码 keyCode 实际键值 48到57 0到9 65到90 a到z（A到Z） 112到135 F1到F24 8 BackSpace（退格） 9 Tab 13 Enter（回车） 20 Caps_Lock（大写锁定） 32 Space（空格键） 37
Vue学习之事件
qq_40837310的博客
01-26 1142
简介 事件的基本使用： 在vue中，使用v-on:事件名=“代码块或回调方法名”，进行事件的绑定，简便写法是@事件名=“代码块或回调方法名”,回调方法要在vue实例对象的methods配置项中进行配置。 注意事项： vm中的methods中配置的函数不要使用箭头函数，要用普通函数，如果使用箭头函数，那么该函数的this的值就不是指向vm本身了，如果是普通函数，那么this的值是vm实例对象本身。 methods中配置的函数，都是被vue所管理的函数，this指向vm本身或者执行vue的组件实例对象。 事件
Vue实现跨平台简单键盘示例
"这篇文章主要展示了如何使用Vue.js框架来创建一个自定义的简单键盘组件，该组件适用于移动端和PC端的应用。作者通过分享代码实例，帮助读者理解如何实现这一功能，包括不同类型的键（数字、符号、删除、空格等）的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值