vue如何通过键盘方向键切换input焦点

功能介绍

vue方向键插件，适合键盘的快捷键操作，通过键盘在input间切换，应用在后台系统开单，财务等等的快速输入和保存上，使用简单，配置方便

使用方法

安装
npm install --save vue-direction-key
使用
在入口文件中引用

import Direction from 'vue-direction-key'
Vue.use(Direction)

在模版文件中使用
template中

<el-input placeholder="请输入内容" v-direction="{x: 0, y: 0}"></el-input>
<input type="text" v-direction="{x: 1, y: 0}">

script中

created: function () {let direction = this.$getDirection()direction.on('keyup', function (e, val) {if (e.keyCode === 39) {direction.next()}if (e.keyCode === 37) {direction.previous()}if (e.keyCode === 38) {direction.previousLine()}if (e.keyCode === 40) {direction.nextLine()}})
}

说明： x，y分别为x轴和y轴的坐标，事件的绑定必须在mounted之前，可以放在created中或者beforeMounted中(在mounted中绑定由于组建的渲染顺序可能会无效)

api

在vue组件钩子中使用this.$getDirection()获取direction对象，该对象有以下方法

direction.on(keys, fun)
- 参数： keys： (string) 原生的事件参数如： 'keyup', 'keydown'等
  fun：自定义函数，有两个参数function(e, val),e为event对象，val为触发的input绑定的自定义指令的值，可以通过此选项来传值进行特殊判断，例如：
template中
```
<input type="text" v-direction="{x: 1, y: 0, type: 'name'}">
```
script中
```
direction.on('keyup', function (e, val) {if (val.type === 'name') {console.log(111)}
})
```
- 作用：给directive作用的原生input绑定事件，注意是绑定在原生的input上，例如：
```
direction.on('keyup', function (e, val) {if (e.keyCode === 39) {direction.next()}if (e.keyCode === 37) {direction.previous()}if (e.keyCode === 38) {direction.previousLine()}if (e.keyCode === 40) {direction.nextLine()}
})
```
direction.next(x, y)
- 参数： x,y轴的坐标，例如(1, 1) <选填>，默认为当前focus的input坐标
- 作用：光标移动到下一个input
direction.previous(x, y)
- 参数： x,y轴的坐标，例如(1, 1) <选填>，默认为当前focus的input坐标
- 作用：光标移动到上一个input
direction.previousLine(x, y)
- 参数： x,y轴的坐标，例如(1, 1) <选填>，默认为当前focus的input坐标
- 作用：光标移动到上一行的input
direction.nextLine(x, y)
- 参数： x,y轴的坐标，例如(1, 1) <选填>，默认为当前focus的input坐标
- 作用：光标移动到下一行的input
direction.onEnd
- 作用：函数，光标移动到最后一个input出发的函数
  例如：
```
direction.onEnd = function () {console.log(111)
}
```

在element表格中使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>vue-direction-key</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 引入vue-direction-key --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-direction-key/direction.js"></script>
</head><body><div id="app"><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"><template slot-scope="scope"><el-input v-model="scope.row.date" placeholder="请输入内容" v-direction="{x: 0, y: scope.$index}"></el-input></template></el-table-column><el-table-columnprop="name"label="姓名"width="180"><template slot-scope="scope"><el-input v-model="scope.row.name" placeholder="请输入内容" v-direction="{x: 1, y: scope.$index}"></el-input></template></el-table-column><el-table-columnprop="address"label="地址"><template slot-scope="scope"><el-input v-model="scope.row.address" placeholder="请输入内容" v-direction="{x: 2, y: scope.$index}"></el-input></template></el-table-column></el-table></div>
</body><script type="text/javascript">Vue.use(Direction)var app = new Vue({el: '#app',data: {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]},created: function () {let direction = this.$getDirection()direction.on('keyup', function (e, val) {console.log(val)if (e.keyCode == 39) {direction.next()}if (e.keyCode == 37) {direction.previous()}if (e.keyCode == 38) {direction.previousLine()}if (e.keyCode == 40) {direction.nextLine()}})}})
</script>
</html>

多个组件共存

如果一个组件里面有多个表格或控件，可以支持自定义指令的参数，例如

<input type="text" v-direction:a="{x: 0, y: 0}">
<input type="text" v-direction:a="{x: 1, y: 0}">
<input type="text" v-direction:b="{x: 0, y: 0}">
<input type="text" v-direction:b="{x: 1, y: 0}">

created: function () {let a = this.$getDirection('a')a.on('keyup', function (e, val) {if (e.keyCode === 39) {a.next()}if (e.keyCode === 37) {a.previous()}if (e.keyCode === 38) {a.previousLine()}if (e.keyCode === 40) {a.nextLine()}})let b = this.$getDirection('b')b.on('keyup', function (e, val) {if (e.keyCode === 39) {b.next()}if (e.keyCode === 37) {b.previous()}if (e.keyCode === 38) {b.previousLine()}if (e.keyCode === 40) {b.nextLine()}})
}

原链接：https://www.jianshu.com/p/b12dbb0b17f9

vue如何通过键盘方向键切换input焦点相关推荐

Vue使用虚拟键盘+中英文切换
1.安装依赖 npm install simple-keyboard --save npm install simple-keyboard-layouts --save 2.虚拟键盘组件 simple ...
Mac下Excel中无法用键盘方向键切换单元格
原创simmy2012-02-16 16:02:05评论(0)566人阅读同事在Mac下的Excel表要切换单元格,一般来说通过键盘即可,但是却发现单元格无法切换反而整个表会跟着移动.google后 ...
菜鸟修炼笔记--QT--【问题】界面切换时焦点各种异常的处理
菜鸟修炼笔记--QT--[问题]界面切换时焦点各种异常的处理前言切换界面时需要完成的操作 1. 焦点的设置 2. 键盘的切换其他焦点丢失的原因前言由于工作需要,我最近一直在使用QT来设计界面 ...
qt类似电视盒子的通过方向键切换焦点的实现方法
比如这样的需求需要焦点通过上下左右在按钮和widget或者其他窗口类中切换. 核心实现方法就是通过一个信号单例接收全局的键盘事件并发出信号每个要切换的焦点类都连接上接收到信号的窗口类或者button将 ...
jquery监听pda 按键_js 点击input焦点不弹出键盘 PDA扫描枪
直接贴代码 1.利用input readonly属性当input有readonly属性的时候,即使获取焦点,也不会吊起小键盘扫码枪输入的间隔大概在15-60毫秒,然后手动输入的100-200毫秒之 ...
js 点击input焦点不弹出键盘 PDA扫描枪直接贴代码
1.利用input readonly属性当input有readonly属性的时候,即使获取焦点,也不会吊起小键盘扫码枪输入的间隔大概在15-60毫秒,然后手动输入的100-200毫秒之间 onfo ...
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
vue获取input的属性_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...
vue实现1-4-9宫格切换
vue实现1-4-9宫格切换 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...