In web forms, it is often necessary to programmatically control the autofocus behavior of input and textarea. For example, in a project I recently made, there is a process of packing and out of the warehouse. The process of automatic focusing of the input box is as follows: when the page is entered, it will automatically focus on the order number input box -> the order number is scanned and focus on the product barcode input box -> scan After finishing a product barcode, it still stays in the barcode input box -> all barcodes are scanned and focus on the order number input box. In order to meet this demand, I made this instruction, github address: vue-auto-focus , welcome to 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 l: 0 , // Auto focus control, when changing, execute auto focus command
currentIndex: 0 , // the index of the currently focused element
actionType: 'next' , // autofocus action type
}
},
methods: {
/**
* Control auto focus command execution
* @param actionType { string } Auto focus type it can be 'next' / 'prev' / 'first' / 'last' / 'jump'
* @param index { string } When actionType is 'jump' , it needs to be passed in the index of the element to be focused
**/
setFocus(actionType,index) {
if (actionType === 'jump') {
this.currentIndex = index
}
this.focusCtrl++
this.actionType = actionType
},
/**
* When the element is focused, get the index of the currently focused element
* @param index { number } currently focused index
**/
setFocusIndex(index) {
this.currentIndex = index
},
}
}
</script>
behavior control
-
next focuses on the next element
-
prev focus to the previous element
-
first focuses on the first element
-
last focuses on the last element
-
jump focuses on the specified element
Focus on behavior control logic
/**
* Focused behavior control
* next focus to the next element
* prev focus to the previous element
* first focuses on the first element
* last focuses on the last element
* jump jump to the specified element
* @param the
*/
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)
}
},