vue-auto-focus: 控制自动聚焦行为的 vue 指令

在网页的表单中,经常需要用程序来控制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)
    }
},

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客猴

RecyclerView还能这么玩

RecyclerView 从诞生至今,因其具有良好的灵活性、可扩展性而深受人们的爱好。目前已经被开发者广泛应用到App中。本文主要针对 RecyclerView...

852
来自专栏星回的实验室

CSS闭合浮动

一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动

952
来自专栏知晓程序

有趣的文字千篇一律,加了「下划线」万里挑一 | 晓技巧

1053
来自专栏coding for love

CSS入门

大家都知道,学习前端,有三大神器,html+css+js。如果用武学来比喻,html就好像骨架身躯,学习html就是习武之人所谓的打熬身体,身体底子好,习武才能...

712
来自专栏菜鸟前端工程师

html+css学习笔记007-样式优先级0外链css样式表

842
来自专栏狮乐园

interview record 20160822

问了一些列范围超级广的问题,不过我感觉大部分问题的答案,面试官还是比较满意的,有一些小问题没有答上来,我觉的并不是因为自己没有能力,其实就是所谓的“约书亚树”道...

763
来自专栏Sign

web版《合成10》代码分享

变成月更了。 想做的事情很多,继续扩展『格斗节奏』,把『小红帽』文字冒险游戏成立一个童话系列,优化『月千之夜』和『破壳曼』,上线『Boo』。继续完成各个漫画系列...

3246
来自专栏cs

学markdown怎能不知道与之相关的html了include <iostream>

<h2>导言</h2> <strong> markdown,hthl都是超文本标记语言,markdown是简化版本的html,兼容html语言,熟悉一下ht...

2294
来自专栏星回的实验室

CSS居中方法集锦

这阵一直忙各路笔试面试,心越来越浮躁,也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点,让网上书上看的杂乱无章的东西...

891
来自专栏程序人生 阅读快乐

CSS设计指南 (第3版)

《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章,前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素...

491

扫码关注云+社区