vue.js - vue input 进入页面自动获取input 输入框 焦点

问题描述

问 题

<div class="top_center">
    <input type="text" class="form_input" @change="SearchCardname" v-model="CardName" autofocus="autofocus">
    <img src="./imgaes/sousuoh.png" alt="">
</div>

autofocus="autofocus 第一次进入页面的时候有获取焦点 但是输入框出不来。 。

怎么才能在每次进入这个页面。 获取焦点 的同时清空input的值

移动端

页面进去也没 自动焦点。。

解决方案

写个自定义指令吧

Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        },
        //也可以用update,update就是当页面有操作的时候就触发，比如点击按钮，输入框输入都算。
        //有一个要注意的就是，就是你页面有几个input,比如一个input绑定了v-focus,一个没有绑定。你在没绑定v-focus的input输入时，绑定了v-focus的input就是自动获取焦点，这是个bug.
        //update: function (el) {
            //el.focus()
        //}
});
new Vue({
  ...
})

<input type="text"  class="form_input"  @change="SearchCardname"  v-model="CardName"  v-focus>

这篇关于vue.js - vue input 进入页面自动获取input 输入框 焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！