input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题

需求：点击button按钮，录入成功后，页面上的input框自动聚焦，快速进行下一次录入，提高效率

开始尝试了几种方法都没有成功

一、首先想到的用vue指令 v-focus，然而没有成功

v-model="book.isbnOrIssn"@change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"v-focus

placeholder="请扫描或输入ISBN/ISSN">

directives: {

focus: {

inserted (el,{value}) {if(value){

el.focus()

}

二、操作页面dom节点，首先用到ref，然而还是没有任何作用

v-model="book.isbnOrIssn"

@change.native="_getIsbn"

@blur="_getIsbn"

:disabled="snDisabled"

ref="gain"

placeholder="请扫描或输入ISBN/ISSN">

this.$refs.gain.focus()

最后去网上查找资料，发现是更新dom先后顺序的问题，在vue中，并不是每次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。

通常情况下，我们不需要关心这个问题，而如果想在DOM状态更新后做点什么，则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

this.$nextTick( () =>{

this.$refs.gain.focus()

} )

还有一种就是弹窗的问题，

打开弹框第一次能自动获取焦点(加了autofocus的缘故，但只有第一次进入才起作用)，

然而关闭弹窗再次进入，光标并没有再次聚焦，还是可以利用 $nextTick，设置100毫秒的延时执行即可

v-model="ghStats.authCode"

ref="gain"

@keyup.enter="onSubmit"

autofocus="autofocus" >

this.$nextTick(() => {

this.$refs.gain.focus()

},100)

input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题相关推荐

Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑: 要实现的效果: 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起 ...
input取消焦点 vue_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...
input取消焦点 vue_Vue有什么特性，相对于其他框架都有那些优势！
(给达达前端加星标,提升前端技能) Vue所提供的一些相对高级的特性,表单操作,自定义指令,计算属性,过滤器,侦听器,生命周期. 表单操作的作用,用于用户的交互,通过表单来进行数据的交互. 基于Vue ...
input取消焦点 vue_vue如何能做到点击其他地方input不失去焦点
我想写一个省市的选择框做成类似iview中picker那种,但是在写的时候发现,使用focus事件控制列表显示/隐藏切换不好用,查了半天没找到好的解决办法下面是我的代码: {{item.provin ...
vue中页面上的input框自动获取焦点
这个问题看了网上的一些资料有一定的帮助,但我还是想把我用的方法记录下来. 代码: <el-inputv-model="ghStats.authCode"ref="g ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...
input回退消失 vue_vue中iE11 input select使用backspace使浏览器回退解决-Go语言中文社区...
在utils中添加preventBackspace.js文件代码如下:export const banBackSpace = (e) => { let ev = e || window.eve ...
python里eval和input组合使用_python中eval()函数和input()函数用法解析
今天给大家讲解Python中eval()函数和input()函数的用法,希望通过实例的讲解之后大家能对这两个函数有更加深刻的理解. 1.eval()函数 eval()能够以Python表达式的方式解析 ...
angular4获得焦点事件_Angular 4 文本框自动获取焦点二
Angular是不推荐直接通过DOM操作获取元素的,要操作元素就通过@ViewChild装饰器. 在HTML中对元素添加引用myInput: 在ts中可以通过ViewChild获取指定元素的引用: i ...

input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题

input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题相关推荐

最新文章

热门文章