zoukankan      html  css  js  c++  java
  • Vue中自动获取input焦点

    <input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路">

    1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作

    2.Vue官网给出的解决办法

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
    })
    //组件注册,与created、mounted同级

    directives: {
    focus: {
    // 指令的定义
    inserted: function (el) {
    el.focus()
    }
    }
    }
    //使用方式

    <input v-focus>
     inserted(钩子函数):被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

     3.适合Vue

    mounted () {
    this.$nextTick(() => {
    this.$refs.input.focus()
    })
    }
     但是我发现,这些方法都没解决第一次进入页面,input获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。

  • 相关阅读:
    C# 设计模式
    FutureTask、Fork/Join、 BlockingQueue
    线程的几种创建方式
    行锁、表锁、乐观锁、悲观锁
    J.U.C之AQS
    同步容器并发容器
    线程不安全类
    线程封闭
    不可变对象
    安全发布对象—单例模式
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/10916334.html
Copyright © 2011-2022 走看看