autofocus 第二次使用无效

爱编程的小学究

于 2024-04-02 16:56:29 发布

阅读量916

点赞数 26

分类专栏： vue专栏文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45291798/article/details/137248069

版权

vue专栏专栏收录该内容

13 篇文章 0 订阅

订阅专栏

引言
在开发表格中经常会有这样一个需求，点击单元的文本自动切换为输入框
看起来是个很简单的功能，输入框和文本框切换用用v-show或v-if，自动聚焦用autofocus属性
但是在实际开发后，会发现在文本在第二次切换为输入框后又无法自动聚焦了…

1、autofocus（自动聚焦）属性

autofocus属性是布尔属性。
如果存在，它指定元素应在页面加载时自动获得焦点。
常用于input、select、button、textarea元素上

若两个元素都有autofocus，则采用至上而下方式，最上面的那个聚焦
在这里插入图片描述

2、问题以及解决办法

我们来实现一下这个需求：要求点击文字，显示输入框并自动聚焦到输入框上，输入框失去焦点时显示文字
思路：输入框和文本框切换用用v-show或v-if，自动聚焦用autofocus属性

 <div id="root">
        <input type="text" autofocus  v-model="project" style="width: 200px;line-height: 40px;"></input><br/><br/><br/>
        <input type="text" autofocus  v-model="project" style="width: 200px;line-height: 40px;"></input><br/><br/><br/>
        <div style="width: 200px;color: red;font-size: 18px;" v-show="!isEdit" @click="isEdit = true">{{project}}</div>
        <input autofocus v-show="isEdit" @blur="isEdit = false" type="text" placeholder="" v-model="project" style="width: 200px;line-height: 40px;"></input>
    </div>

没有自动聚焦
在这里插入图片描述
通过百度查询，可以得知autofocus属性只有在页面加载时才会设置，而想实现切换后自动获取聚焦无法用autofocus实现

解决方法：
自定义获取焦点的事件，每次插入或者更新的时候都自动聚焦

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>autofocus不起作用</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/router.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" autofocus v-model="project"
            style="width: 200px;line-height: 40px;"></input><br /><br /><br />
        <input type="text" autofocus v-model="project"
            style="width: 200px;line-height: 40px;"></input><br /><br /><br />
        <div style="width: 200px;color: red;font-size: 18px;" v-show="!isEdit" @click="isEdit = true">{{project}}</div>
        <input key="index"  v-show="isEdit" v-focus @blur="isEdit = false" type="text" placeholder="" v-model="project"
            style="width: 200px;line-height: 40px;border: none;"></input>
    </div>
</body>
</html>
<script>
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                isEdit: false,
                project: 'autofocus不起作用'
            }
        },
        // 自定义指令
        directives: {
            focus: {
                // 当被绑定的元素插入到 DOM 中时……
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                },
                //指令所在的模板被重新解析时
                update(el, binding) {
                    console.log(binding)
                    el.focus()
                }
            }
        }
    })
</script>

点击文字实现，切换输入框并自动聚焦到输入框内
在这里插入图片描述

遇到的小问题
在实际写的过程中遇到了一个小问题，v-focus放到v-show之前，自定义指令v-focus不起作用，写到v-show之后就可以了
去百度了一下，自定义指令和v-show的优先级是一样的，排除是优先级引起的可能
另一种情况可能就是 v-show与自定义指令v-focus冲突，v-show用来控制元素的显示隐藏，v-focus聚焦到元素上的前提是元素要存在。在两者优先级一样的情况下，如果v-focus先渲染，这时候元素还没有显示就无法聚焦，等再执行v-show显示元素的时候 v-focus已经执行完成；如果是v-show先执行，元素显示，再执行v-focus就能实现自动聚焦了

有其他的解决方案欢迎评论…

爱编程的小学究

关注

26
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
autofocus 第二次使用无效

在开发表格中经常会有这样一个需求，点击单元的文本自动切换为输入框看起来是个很简单的功能，输入框和文本框切换用用v-show或v-if，自动聚焦用autofocus属性但是在实际开发后，会发现在文本在第二次切换为输入框后又无法自动聚焦了…
复制链接

扫一扫