vue中，点击button按钮后，页面上的input框再次自动获取焦点

最新推荐文章于 2023-10-16 17:13:21 发布
最新推荐文章于 2023-10-16 17:13:21 发布
阅读量661 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52469153/article/details/109642191
版权

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

this.$nextTick( () =>{
       this.$refs.gain.focus()
} )
w晚风
关注
专栏目录
Vue - 最新详细实现点击按钮（笔图标）可编辑 input 输入框，点击文字内容后变成 ＜input＞ 输入框同时能修改和取消、删除（详细示例代码，一键复制运行）
王佳斌
07-06 8643
本文将提供给您一个健壮且代码注释详细的组件源码，无样式只写了核心功能，您直接复制，然后按照自己的需求去 更改样式与逻辑，如下图所示：这样的基础示例，更有利于您进行修改和学习！打开 文件夹，在里面建立一个 文件，复制以下代码。 使用示例 随便找个页面，运行起来。 SEO vueinput实现点击按钮文字增删功能，关于vue点击对输入框进行编辑相关内容,包含vue点击对输入框进行编辑，vue 点击编辑按钮后 页面变成input输入框，Vue实现点击表格单元格出现输入框，失去焦点隐藏输入框功能，利用vue插
Vue3 - 详细实现点击文字或按钮后 “变成输入框“ 进行文本编辑，同时能保存修改和取消编辑状态功能，文本旁边有笔图标点击后文字变成 input 框可对文字编辑修改，最新解决方案（详细示例代码教程）
最新发布
王佳斌
07-04 1828
vue3，nuxt3，点击变成输入框，点击编辑按钮让文本变为input方便修改，点击元素变输入框，可编辑input输入框，点击文字内容后变成＜input＞输入框同时能修改和取消、删除，输入框input点击右侧编辑图标后变为可编辑状态，当失去焦点后自动保存，vue文字点击变为输入框能修改，内容变成input可以修改，vue3点击按钮后旁边的文字变为可编辑，组件插件，教程，使文本变成可编辑的效果，点击取消复原，失去焦点还原，取消后恢复成原来的样子，如何实现点笔icon图标将html变成文本输入域能修改和移除，点
Vue 实现输入框新增搜索历史记录功能
10-16
主要介绍了Vue 输入框新增搜索历史记录功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
点按钮创建一个input框，并获取焦点
qq_45803094的博客
09-04 633
点击按钮创建一个input框并获取焦点
vue Antd 输入框Input自动聚焦
queen_css的博客
12-28 6858
1、从vue的实例属性$ref去调input的focus方法使其实现聚焦。 <a-input type="text ref="ainput" /> <button @click="handleChange"></button> 2、点击button自动聚焦，或其他事件需要聚焦 methods:{ handleChange(){ this.$nextTick(()=>{ this.handleInputFo
Vue3 点击el-button 触发input type=“file“ 选择本地文件 并修改样式
weixin_45220510的博客
08-05 5358
Vue3 点击el-button 触发input type="file" 选择本地文件 并修改样式。
input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题
weixin_34896969的博客
12-28 3524
需求：点击button按钮，录入成功后，页面上的input框自动聚焦，快速进行下一次录入，提高效率开始尝试了几种方法都没有成功一、首先想到的用vue指令 v-focus，然而没有成功v-model="book.isbnOrIssn"@change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"v-focusplaceholder="请...
vue中弹窗input框聚焦_vue中，页面上的input框自动获取焦点及二次获取焦点问题...
weixin_39870700的博客
01-13 923
需求：点击button按钮，录入成功后，页面上的input框自动聚焦，快速进行下一次录入，提高效率开始尝试了几种方法都没有成功一、首先想到的用vue指令 v-focus，然而没有成功v-model="book.isbnOrIssn"@change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"v-focusplaceholder="请...
Vue - 实现搜索框获取焦点时下方显示一个 div 容器，点击 input 输入框时底部出现下拉框容器，当失去焦点时底部容器隐藏（仿造类似百度搜索框效果，可做下拉提示搜索或热门推荐等功能）
王佳斌
10-16 1639
vue2，搜索框，element ant design vue2全局搜索框，vue网站网页项目，vue搜索框点击出现下方容器，vue搜索框获得焦点后下方出现div推荐，vue2如何实现点击搜索框时下方出现容器，vue element搜索框激活时底部显示其他内容，vue实现类似百度搜索框功能效果，vue2仿百度搜索框详细教程源码代码，input搜索框获得focus焦点时下方显示额外容器，input输入框获取焦点下面显示内容,失去焦点隐藏内容，vue输入框激活时显示下拉容器，Vue实现input输入框下拉搜索提
Element UI 小编程题
m0_67841039的博客
05-31 1380
请封装一个自定义组件：MyTags 需求： 默认显示“+New Tag”按钮 点击“+New Tag”按钮后，显示输入框，并自动获取焦点 输入内容后回车，将内容追加到按钮前面显示为标签 按Esc键，推出输入状态，还原显示“+New Tag”按钮 点击标签的“x”删除 补充：重点关注功能实现，样式不做特殊要求 效果展示： 代码展示： 步骤一：下载 vue-cli 步骤二：在main.js中导入需要的组件和样式 import Vue from 'vue'...
前端：输入框自动获取鼠标焦点
longnight_over的博客
07-14 4060
项目场景： 我这里只需要点击后就可以使用键盘输入文字。 操作流程：点击某个地方（触发方法），显示输入框，同时获取鼠标焦点。 问题描述： 点击显示输入框，可直接输入，自动获取鼠标焦点。 原因分析： 提示：这里填写问题的分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，
点击一个按钮，让输入框获取焦点
_小郑有点困了的博客
08-01 4369
点击一个按钮，让输入框获取焦点 只需设置一个属性：
input眼睛显示 vue_vue 点击编辑按钮 显示input输入框同时获取焦点
weixin_39770626的博客
12-19 563
最近在做一个使用element-ui组件库搭建的后台系统的项目，遇到一个需求是：在table列表里面点击编辑，可以实现编辑内容的需求大概就是下面图的样子：项目图然后就是点击编辑按钮可以实现编辑table表里面的内容。实现过程都很顺利，然后发现点击编辑变成input输入框后获取不到焦点。然后尝试使用原生属性autofocus，但是这个属性 只在模板加载完成时起作用，也就是说只有第一次有用。然后尝试了...
python控件获取焦点_vue如何实现点击button 使input获取焦点
weixin_39557797的博客
12-20 267
Problem Description点击rename的时候可修改input里的值，希望点击button后可以将焦点设置在input里。DOM操作可以直接设置focus，但是Vue里不建议进行DOM操作，大家有什么好办法吗Code//history.vuev-for="item in notes"class="historyitem":class="{haha: activeNote===item...
vue中实现点击按钮使input显示的同时获取焦点
热门推荐
zuo-yiran的博客
10-24 2万+
需求说明：点击搜索按钮出现input框，并自动使input框聚焦。 如图所示： 实现方式1：利用vue的ref html代码如下： &lt;input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." /&gt; &lt;div v-show=&quot
Vue 3 获取焦点教程：input聚焦方法
本文将介绍在Vue 3中如何实现元素获取焦点，特别是针对input元素。在Vue 2中，我们通常使用`$nextTick`配合`$refs`来实现焦点转移，但在Vue 3中，这个过程有所改变。 在Vue 3中，我们依然可以使用`ref`来绑定元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值