H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue中input如何自动获取焦点?

开始界面如下:

clipboard.png

当我点击时,变成:

clipboard.png

我的问题:
当切换到input时没办法获取焦点

我的代码:

<div class="surface" @click="active_search = false" v-if="active_search">
    <div class="color">
        <van-icon name="search"/>
        <p>搜索调查模板</p>
    </div>
</div>
<div class="real" @click="active_search = true" v-else>
    <van-icon name="search"/>
    <input
        v-model="val"
        type="text"
        placeholder="搜索调查模板"
        @change="changeInput()"
        ref="myInput"
        autofocus>
</div>
---------
data() {
    return{
        active_search:true,
        val:"",
    }
},
watch:{
    //每次变化,input获取焦点
    active_search:function(a,b){
        if(b == true){
            this.$refs.myInput.focus();
        }
    }
},

回答:

watch: {
    // 每次变化,input获取焦点
    active_search: function(a, b) {
      if (b == true) {
        this.$nextTick(function() {
          this.$refs.myInput.focus()
        })
      }
    }
  },

watch 改成这样,原因是使用v-if,input刚生成,直接通过$refs去取,拿不到。

回答:

autofocus=”autofocus”

本文地址:H5W3 » vue中input如何自动获取焦点?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址