vue-auto-focus: 控制自动聚焦行为的 vue 指令方法


Posted in Javascript onAugust 25, 2018

在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。

为了应付这种需求,就做了这个指令,github地址: vue-auto-focus ,欢迎star。

example

<template>
 <form v-auto-focus="focusCtrl" :data-current="currentIndex" :data-action="actionType">
  <input @focus="setFocusIndex(0)" type="text" data-index="0">
  <input @focus="setFocusIndex(1)" type="text" data-index="1">
  <textarea @focus="setFocusIndex(2)" name="" id="" cols="30" rows="10" data-index="2"></textarea>
  <input @focus="setFocusIndex(3)" type="text" data-index="3">
 </form>
</template>
<style scoped>
</style>
<script type="text/babel">
 export default {
  data() {
   return {
    focusCtrl: 0, // 自动聚焦控制,变动时,执行自动聚焦指令
    currentIndex: 0, // 当前聚焦元素的索引
    actionType: 'next', // 自动聚焦的行为类型
   }
  },
  methods: {
   /**
    * 控制自动聚焦指令执行
    * @param actionType {string} 自动聚焦类型 it can be 'next'/'prev'/'first'/'last'/'jump'
    * @param index {string} 当actionType为'jump'时,需要传入将要聚焦元素的索引
    **/
   setFocus(actionType,index) {
    if (actionType === 'jump') {
     this.currentIndex = index
    }
    this.focusCtrl++
    this.actionType = actionType
   },
   /**
    * 元素聚焦时,获取当前聚焦元素的索引
    * @param index {number} 当前聚焦的索引
    **/
   setFocusIndex(index) {
    this.currentIndex = index
   },
  }
 }
</script>

行为控制

next 聚焦到下一个元素

prev 聚焦到上一个元素

first 聚焦到第一个元素

last 聚焦到最后一个元素

jump 聚焦到指定的元素

聚焦行为控制逻辑

/**
 * 聚焦行为控制
 * next 聚焦到下一个元素
 * prev 聚焦到上一个元素
 * first 聚焦到第一个元素
 * last 聚焦到最后一个元素
 * jump 跳转到指定的元素
 * @param el
 */
const focusCtrl = function (el) {
 const action = el.dataset.action
 const allFocusEls = getAllFocusEls(el)
 const focusLen = allFocusEls.length
 let current = getTargetIndex(el,allFocusEls)
 switch (action) {
  case 'next': // 如果action为next,则聚焦到下一个输入框
   if (current >= focusLen - 1) {
    current = focusLen - 1
   } else {
    current++
   }
   autoFocus(allFocusEls[current])
   break
  case 'prev': // 如果action为prev,则聚焦到上一个输入框
   if (current <= 0) {
    current = 0
   } else {
    current--
   }
   autoFocus(allFocusEls[current])
   break
  case 'first': // 如果为first,则聚焦到第一个输入框
   current = 0
   autoFocus(allFocusEls[current])
   break;
  case 'last': // 如果为last,则聚焦到最后一个输入框
   current = focusLen - 1
   autoFocus(allFocusEls[current])
   break
  case 'jump': // 如果为jump,则获取focusIndex,跳转到对应的输入框
   if (current >= 0 && current < focusLen) {
    autoFocus(allFocusEls[current])
   }
   break
 }
}

必须在需要控制的元素上添加data-index属性,需要在父元素上添加data-action属性和data-current属性,data-action为指令行为的类型(值为next,prev等),data-current为当前聚焦元素的data-index值, getAllFocusEls 方法其实就是获取所有属性为data-index的元素,代码如下:

/**
 * 获取需要聚焦的所有元素
 * @param el {Node} 指令挂载的元素
 * @returns {NodeList} 需要聚焦的元素列表
 */
const getAllFocusEls = function (el) {
 return el.querySelectorAll('[data-index]')
}

getTargetIndex 方法用来获取当前聚焦元素的在集合中的索引值,代码如下:

/**
 * 获取当前聚焦元素在集合中的位置
 * @param el
 * @param collection
 * @returns {number}
 */
const getTargetIndex = function(el,collection) {
 const target = document.querySelector(`[data-index="${el.dataset.current}"]`)
 return Array.from(collection).indexOf(target)
}

inserted

指令挂载时,自动聚焦到指定的元素

/**
 * 进入页面时,根据设置的data-index索引值,聚焦到对应的输入框
 * @param el
 */
inserted: function (el) {
 const allFocusEls = getAllFocusEls(el) // 获取需要聚焦的input元素组
 let current = getTargetIndex(el,allFocusEls)
 if (!current || current < 0 || current >= allFocusEls.length) { // 如果没有设置data-current,或者current的数值范围不符合要求,则默认聚焦到第一个输入框
  current = 0
 }
 const currentEl = allFocusEls[current]
 autoFocus(currentEl)
},

update

通过指令的value值控制指令的执行,如果值有变动,则执行指定的操作,聚焦到指定的元素

/**
 * 更新时,如果focusCtrl有变动,则根据actionType来判断聚焦的行为,聚焦到对应的元素
 * @param el
 * @param value
 * @param oldValue
 */
update: function (el,{value,oldValue}) {
 if (value !== oldValue) {
  focusCtrl(el)
 }
},

以上这篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Javascript实现基本运算器
Jul 15 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
You might like
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
推荐dojo学习笔记
2007/03/24 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
python实现代理服务功能实例
2013/11/15 Python
python append、extend与insert的区别
2016/10/13 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python随机取list中的元素方法
2018/04/08 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
关于责任的演讲稿
2014/05/20 职场文书
运动会广播稿20字
2015/08/19 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android