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获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。
Vue中自动获取input焦点的更多相关文章
- vue element-ui 自动获取光标
<el-input ref="customerInput"></el-input> this.$refs.mark.$el.querySelector('i ...
- vue中如何获取后台数据
原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- vue中多个input绑定enter按键事件
默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...
- vue中js获取组件实例
获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...
- Vue中对获取的数据进行重新排序
var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组,来接收数据.listJust: [] addDat ...
- vue中 js获取图片尺寸 设置不同样式
1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式
- 在vue中获取微信支付code及code被占用问题的解决?
这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...
- 17、前端知识点--Vue中ref的使用
methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...
随机推荐
- ThinkPHP v6.0.x 反序列化漏洞利用
前言: 上次做了成信大的安询杯第二届CTF比赛,遇到一个tp6的题,给了源码,目的是让通过pop链审计出反序列化漏洞. 这里总结一下tp6的反序列化漏洞的利用. 0x01环境搭建 现在tp新版本的官网 ...
- 容错保护机制:Spring Cloud Hystrix
最近在学习Spring Cloud的知识,现将容错保护机制Spring Cloud Hystrix 的相关知识笔记整理如下.[采用 oneNote格式排版]
- 解决const char* to char* 的错误
一般情况下 char* string = "abc"; 编译后会出现标题中的错误. 我们只需要在字符串前加上const_cast<char*>即可,这个作用是丢弃变量的 ...
- php弱语言特性-计算科学计数法
php处理字符串时存在一个缺陷问题,如果字符串为“1e1”,本该是一个正常的字符串,但是php会将它认为是科学计数法里面的e: 也就是按照数学的科学计数法来说:1e1=10^1=10,因此php会把这 ...
- IO流学习之字符流(三)
IO流之字符流缓冲区: 概念: 流中的缓冲区:是先把程序需要操作的数据保存在内存中,然后我们的程序读写数据的时候,不直接和持久设备之间交互,而改成和内存中的数据进行交互. 缓冲区:它就是临时存储数据, ...
- git在idea中使用
(1)创建README.md文件 fengli@DESKTOP-FEQ1N4I MINGW32 /f/workspace/imallproject (master)$ touch README.md ...
- 带你快速了解Linux文件系统
http://www.embeddedlinux.org.cn/emb-linux/file-system/201807/03-8197.html 这篇教程将帮你快速了解 Linux 文件系统. 早在 ...
- defender 月考总结
今天是2019年5月28日,昨天月考了,也是C**生日.昨天考完之后,还是那种考完试的释然感.目前,已经批出来了数学.英语.物理三门学科的成绩,语文还没有批出来.应该明天就能够批出来吧.现在趁着休息, ...
- DFS/BFS-A - Red and Black
A - Red and Black There is a rectangular room, covered with square tiles. Each tile is colored eithe ...
- WPF 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改
该问题出现在WPF中的VM类中,ObservableCollection类型,该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改, ...