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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
js实现无缝滚动双图切换效果
Jul 09 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
JS正则表达式常见函数与用法小结
Apr 13 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实现mysql数据库备份类
2008/03/20 PHP
PHP的自定义模板引擎
2017/03/24 PHP
php实现记事本案例
2020/10/20 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
Python实现端口检测的方法
2018/07/24 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
代码实例讲解python3的编码问题
2019/07/08 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
国际贸易求职信
2014/07/05 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
职工年度考核评语
2014/12/31 职场文书
导游词之青岛太清宫
2019/12/13 职场文书