input框无法获取焦点？nextTick的使用

最新推荐文章于 2024-02-21 17:56:14 发布
最新推荐文章于 2024-02-21 17:56:14 发布
阅读量660 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buterra/article/details/130609087
版权

1.原因

页面中的input框显示是受v-show控制的，在执行回调函数时，nput还未显示。回调函数执行完成后，模板才会进行更新，导致input框未获取到焦点

2.使用nextTick解决

 this.$nextTick(function(){

          this.$refs.inputTitle.focus()

  })

 nextTick的作用：在下一次DOM更新结束后执行其指定的回调

什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行

buterra
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从源码里了解vue中的nextTick的使用
10-17
主要介绍了vue的nextTick的使用,本文从源码出发给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Node.js中的process.nextTick使用实例
10-24
主要介绍了Node.js中的process.nextTick使用实例,nextTick函数有什么用、怎么用、和setTimeout有什么区别呢,本文就讲解了这些知识,需要的朋友可以参考下
vue源码nextTick使用及原理解析
10-16
主要介绍了vue源码nextTick使用及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
【chrome扩展开发】js中无法通过focus让input输入框获取焦点（ js focus 事件无法生效）
最新发布
VsXiXi的博客
02-21 473
确认鼠标是否在当前页面窗口。鼠标如果是在插件的侧边栏（sidepanel）触发或者浏览器控制台 console 中执行的 js 代码，则页面无法获取鼠标并聚焦到元素上。这就是浏览器控制台（包括浏览器插件侧边栏）的工作方式。运行每个命令后，控制台将获得焦点。因此，焦点不适用于来自控制台的其他输入。执行后，立即单击页面上的任意位置以将焦点从控制台上移开。现在 5 秒后，焦点将设置在输入上。若要测试它，请在控制台中运行此代码。
玄学小问题之input.focus（）没生效的问题
lovestar墨竹的博客
10-16 1787
玄学小问题之input.focus()失效
Angular：input输入框获取不到焦点
dongnihao的博客
07-22 1427
解决方案： 这边试了以下几种方法 1.对input元素添加 autofocus属性，不生效 2.使用angular指令，太烦了不想试 3.模板变量获取元素，然后设置 element.focus( ) ，无效 4.模板变量获取元素，然后设置 element.focus( ) ，放在settimeout中，进入下一轮事件循环，生效之后马上消失。 最后： 把 element.focus( ) 方法放在ngAfterViewInit() 钩子函数内。并且设置一个setTimeout( ). 前几种方式.
element input focus()获取焦点无效？
weixin_55341181的博客
07-08 4187
有个业务场景需要需要点击表格单元格变成input编辑，点击其他地方input切换成span。如图：未编辑状态使用span显示 编辑状态切换成input 代码 在这里就出现了一个问题，那就是切换到input的时候 无法自动获取焦点，无法获取焦点的话就没办法点击其他地方关闭。在百度也找了很多办法，都是无效。最终的解决方案就是在html哪里把v-if改成v-show就解决了这个问题。修改代码.........
Element UI输入框focus()方法自动获取焦点失败处理方法
weixin_45517017的博客
03-27 1万+
Element UI输入框focus()方法自动获取焦点失败处理方法 ​ 本来想通过自定义事件触发输入框，并获取焦点，但是使用官方提示的focus()方法一直失效 后来百度了半天，终于找到一个比较好的处理方法。 ​ 先放对比代码： 刚开始的代码 <el-input v-if="isFormOpened" v-model="scope.row.name" @blur="updateLib"> </el-input> <el
Vue Element UI input输入框focus()无法获取焦点
weixin_64663822的博客
05-25 2413
在做后台管理系统的时候需要实现，点击出现input框让后进行修改。 原来的我的代码写成这样。 this.$nextTick(() => { this.$refs.Textinp.focus(); }); 后来我发现，无法获取焦点是因为我使用了show来隐藏input框，导致页面有很多id为Textinp的输入框，把v-show改成v-if就可以解决这个问题 ...
input输入框在Safari浏览器中可以点击,但是不能获取焦点
wei_dan1129的博客
06-30 589
原因 是css设置了-webkit-user-select: none导致的 解决方法 设置-webkit-user-select: text
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
♥ vue中$nextTick()
林太白
08-10 291
♥ vue中$nextTick()
input输入框不能获得焦点
weixin_33962621的博客
03-28 1634
　　今天在ipad上遇到一个问题：jquery 调用 $(id).focus() 方法，失效，不能弹出键盘获得输入的焦点。 　　 　　开始以为是$(id).focus() 方法的问题，然后就试着用原声的document.getElementById('id').focus() 方法，结果还是不行 　　想啊想，最后叫ios的同事帮忙看看，结果是ios外壳要给输入框某个权限，修改了外壳，...
react 移动端H5 页面 input 获取焦点不灵敏
weixin_43824848的博客
08-28 703
开发中遇到ios中input获取焦点，需要一定的点击时长，经常无法一次成功获取焦点。 解决方法：在input控件外面包裹一层div，然后 在div上添加点击事件，为input手动获取焦点。 //tsx写法，先定义HTMLInputElement[] = []; 1. private phoneInputs: 2. <div onClick={() => this.inputClicked(index)}> <input placeholder={item.text}
手机端的有些设置。。。
ailvejie1967的博客
07-01 304
下午遇到一个问题，移动端的input都不能输入了，后来发现是 －webkit－user-select ：none ; 在移动端开发中，我们有时有针对性的写一些特殊的重置，比如： ＊ { -webkit - touch - callout: none; //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为 //禁...
不能获取input焦点_input表单一些“非常好用的”属性
weixin_30119469的博客
01-14 184
input表单在我们的网页中可是必不可少的。大家都知道表单的属性可以让我们达到我们想要的表单的效果，从而根据我们的需求设计表单，这样更能增加用户的体验！接下来我列了几个“非常好用的”属性。赶紧学起来吧~disabled：不可用的readonly：只读placeholder：默认提示信息autofocus：网页一打开自动获取焦点maxlength：限制最大的输入个数以上属性的实际使用代码：不可用的表...
uniapp，js控制input获取焦点，input无法获取焦点问题。
热门推荐
qinkaiyuan94的博客
06-22 1万+
我遇到的问题是 本来我是通过 v-if 来判断 input的显示和获取焦点的，input上写的固定的 :focus="true" 然后以为可以通过 v-if来渲染 input，每次重新渲染都 获取焦点。 小程序上是可以的。 但是app上不行，就改成了 通过v-show控制input是否显示，然后 :focus="控制input是否显示的变量" 这样写，就修复了这个问题 ...
文本框获取焦点后点击回车提交和不提交
yy193728的博客
05-05 2185
文本框获取焦点后点击回车提交和不提交: 在有些时候为了方便，可能有这样的需求，那就是当表单中的文本框获取焦点的时候，点击enter回车键能够实现表单提交功能，但是有些时候我们不希望有类似的功能，比如表单比较庞大，辛辛苦苦填写了半天表单，一个回车误操作，导致表单提交。实现上述两种功能通常使用javascript，其实使用css也是可以粗略做到此功能。 （1）.一个文本框的时候，提交按钮type不
input获取焦点打开对话框
09-15
在Vue element-ui项目中，如果你想要在打开对话框时让input获取焦点，可以使用$nextTick方法来确保DOM已经渲染完毕。在你打开对话框的方法中，可以通过给input添加ref属性来获取到该元素的引用，然后使用$refs属性来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值