<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获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。

Vue中自动获取input焦点的更多相关文章

  1. vue element-ui 自动获取光标

    <el-input ref="customerInput"></el-input> this.$refs.mark.$el.querySelector('i ...

  2. vue中如何获取后台数据

    原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...

  3. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  4. vue中多个input绑定enter按键事件

    默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...

  5. vue中js获取组件实例

    获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...

  6. Vue中对获取的数据进行重新排序

    var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组,来接收数据.listJust: [] addDat ...

  7. vue中 js获取图片尺寸 设置不同样式

    1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式

  8. 在vue中获取微信支付code及code被占用问题的解决?

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...

  9. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

随机推荐

  1. [SDOI2012] 任务安排 题解

    有感而发,遂书. 其实和sze聊了很久,但他还是退役了.恐怕他是本届里学oi时间最长的一个人吧,从小学五年级开始.我也是因为他,才开始学oi的.他因为学校的压力,不得不放弃.或许是没什么天赋.学了4年 ...

  2. KMP刷题记录

    [BZOJ4698][SDOI2008]Sandy的卡片 差分一下然后选一个串,用这个串的所有前缀和其他串kmp,求出最长的公共部分即可 代码: #include <bits/stdc++.h& ...

  3. sbt package报错:a bytes-like object is required, not 'str'

    Traceback (most recent call last): File , in <module> s.sendall(content) TypeError: a bytes-li ...

  4. WIFI Pineapple 排雷

    1.在WEB界面中无法安装插件 解决:进入SSH,执行opkg update 2.ettercap无法运行,缺少动态连接库,libpcap.so.1.3 创建软连接   ln -s /usr/lib/ ...

  5. Cmake编译库注意

    在生成工程文件后要在Debug x64模式下菜单栏选择:生成->生成解决方案,等10几分钟然后在Cmake Targets下INSTALL,点击“仅用于项目->仅生成INSTALL”,然后 ...

  6. C# DES加密、解密

    /// <summary> /// DES加密字符串 /// </summary> /// <param name="pToEncrypt">待 ...

  7. seleniumChrom无头浏览器

    ---------------------- 谷歌无头浏览器 ----------------------------- import time from selenium import webdri ...

  8. AI算法:1. 决策树

    今天,我们介绍的机器学习算法叫决策树. 跟之前一样,介绍算法之前先举一个案例,然后看一下如何用算法去解决案例中的问题. 我把案例简述一下:某公司开发了一款游戏,并且得到了一些用户的数据.如下所示: 图 ...

  9. Spring Cloud 5大组件

    服务发现——Netflix Eureka 客服端负载均衡——Netflix Ribbon 断路器——Netflix Hystrix 服务网关——Netflix Zuul 分布式配置——Spring C ...

  10. MySQL的去重+列的表达式

    MySQL的去重+列的表达式 1. 去重 作用:去除SELECT查询出来的结果中重复的数据,重复的数据只显示一条. SELECT * FROM `repeat_num`                 ...