本文共 2942 字，大约阅读时间需要 9 分钟。

在网页的表单中，经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目，有个装箱出库的流程，input框自动聚焦的流程如下：页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。为了应付这种需求，就做了这个指令，github地址：  ，欢迎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)    }},

转载地址：http://mshni.baihongyu.com/