在网页的表单中，常常须要用顺序来掌握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)
    }
},

末了，一切文章都邑同步发送到微信民众号上，迎接关注,迎接提意见：