在网页的表单中，经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目，有个装箱出库的流程，input框自动聚焦的流程如下：页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。
十余年的奇台网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整奇台建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“奇台网站设计”,“奇台网站推广”以来，每个客户项目都认真落实执行。
为了应付这种需求，就做了这个指令，github地址： vue-auto-focus，欢迎star。
example
行为控制
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 指令方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
