In web forms, programs are often needed to control the automatic focus behavior of input and textarea. For example, a project I recently did has a process of packing and out-of-stock. The process of automatically focusing on the input box is as follows: When the page enters, it will automatically focus on the order number input box -> After scanning the order number, focus on the product barcode input box -> After scanning a product barcode, it will still stay in the barcode input box -> After scanning all barcodes, focus on the order number input box.
In order to cope with this requirement, this command was made, 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: 0, // Automatic focus control, when changing, execute automatic focus command currentIndex: 0, // The index of the current focused element actionType: 'next', // Autofocus behavior type }
},
methods: {
/**
* Control the execution of automatic focus commands
* @param actionType {string} autofocus type it can be 'next'/'prev'/'first'/'last'/'jump'
* @param index {string} When actionType is 'jump', you need to pass in the index of the element to be focused
**/
setFocus(actionType,index) {
if (actionType === 'jump') {
= index
}
++
= actionType
},
/**
* When the element is focused, get the index of the currently focused element
* @param index {number} The index currently focused
**/
setFocusIndex(index) {
= index
},
}
}
</script>
Behavioral control
next Focus on the next element
prev focuses on the previous element
first Focus on the first element
last Focus on the last element
jump Focus on the specified element
Focus on behavioral control logic
/**
* Focus on behavioral control
* next Focus on the next element
* prev Focus on the previous element
* first Focus on the first element
* last Focus on the last element
* jump Jump to the specified element
* @param el
*/
const focusCtrl = function (el) {
const action =
const allFocusEls = getAllFocusEls(el)
const focusLen =
let current = getTargetIndex(el,allFocusEls)
switch (action) {
case 'next': // If the action is next, focus on the next input box if (current >= focusLen - 1) {
current = focusLen - 1
} else {
current++
}
autoFocus(allFocusEls[current])
break
case 'prev': // If the action is prev, focus on the previous input box if (current <= 0) {
current = 0
} else {
current--
}
autoFocus(allFocusEls[current])
break
case 'first': // If first, focus on the first input box current = 0
autoFocus(allFocusEls[current])
break;
case 'last': // If last, focus to the last input box current = focusLen - 1
autoFocus(allFocusEls[current])
break
case 'jump': // If jump, get focusIndex and jump to the corresponding input box if (current >= 0 && current < focusLen) {
autoFocus(allFocusEls[current])
}
break
}
}
The data-index attribute must be added to the element that needs to be controlled. The data-action attribute and data-current attribute need to be added to the parent element. The data-action is the type of the instruction behavior (values are next, prev, etc.), and the data-current is the data-index value of the current focus element. The getAllFocusEls method is actually to obtain all elements with attributes data-index.The code is as follows:
/**
* Get all elements that need to be focused
* @param el {Node} element mounted by directive
* @returns {NodeList} List of elements that need to be focused
*/
const getAllFocusEls = function (el) {
return ('[data-index]')
}
The getTargetIndex method is used to obtain the index value of the currently focused element in the set. The code is as follows:
/**
* Get the position of the current focused element in the collection
* @param el
* @param collection
* @returns {number}
*/
const getTargetIndex = function(el,collection) {
const target = (`[data-index="${}"]`)
return (collection).indexOf(target)
}
inserted
Automatically focus on the specified element when the command is mounted
/**
* When entering the page, focus on the corresponding input box according to the set data-index index value.
* @param el
*/
inserted: function (el) {
const allFocusEls = getAllFocusEls(el) // Get the input element group that needs to be focused let current = getTargetIndex(el,allFocusEls)
if (!current || current < 0 || current >= ) { // If data-current is not set, or the current value range does not meet the requirements, the default focus will be on the first input box. current = 0
}
const currentEl = allFocusEls[current]
autoFocus(currentEl)
},
update
The execution of the instruction is controlled through the value value of the instruction. If the value changes, the specified operation will be performed to focus on the specified element
/**
* When updating, if focusCtrl changes, the focus behavior is judged based on the actionType and focus on the corresponding element.
* @param el
* @param value
* @param oldValue
*/
update: function (el,{value,oldValue}) {
if (value !== oldValue) {
focusCtrl(el)
}
},
The above vue-auto-focus: The vue instruction method to control automatic focus behavior is all the content I share with you. I hope you can give you a reference and I hope you can support me more.