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 constructor的实际作用分析
Nov 15 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
详解动画插件wow.js的使用方法
Sep 13 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
vue实现下拉菜单树
Oct 22 Javascript
解决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
PHP新手上路(三)
2006/10/09 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python subprocess模块学习总结
2014/03/13 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
用Python 执行cmd命令
2020/12/18 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
个人简历自荐信
2014/06/26 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技