Vue Element UI input输入框focus()无法获取焦点

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量2.4k 收藏 2
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64663822/article/details/124976339
版权

在做后台管理系统的时候需要实现，点击出现input框让后进行修改。

原来的我的代码写成这样。

this.$nextTick(() => {
    this.$refs.Textinp.focus();
});

后来我发现，无法获取焦点是因为我使用了show来隐藏input框，导致页面有很多id为Textinp的输入框，把v-show改成v-if就可以解决这个问题

ALL700
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue element Ui input 输入框 定时获取焦点
蓝胖子的博客
12-09 608
vue element Ui input 输入框 定时获取焦点及 取消焦点
Layui弹框中设置输入框自动获取焦点无效/Layui设置Input框自动获取焦点无效,怎么办？
雾林小妖的博客
06-10 501
Layui弹框中设置输入框自动获取焦点无效/Layui设置Input框自动获取焦点无效,怎么办？
element-ui vue input输入框自动获取焦点聚焦方式
PB瓦工
06-20 884
【代码】element-ui vue input输入框自动获取焦点聚焦方式。
element-ui vue input输入框自动获取焦点聚焦
未末的博客
02-28 5114
有时候会遇到要输入框自动获取焦点的情况，解决如下： 方法一： 步骤： 1.在script中写directives,注册一个全局的自定义指定 v-focus directives: { focus: { inserted: function(el) { el.querySelector("input").focus(); } } }, 2.在input框直接使用 <el-input ... v-focus > </el-.
Element ui el-input出来直接获取焦点
qq_43235503的博客
04-02 326
Element ui el-input出来直接获取焦点
【区分vue2和vue3下的element UI Input 输入框组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
05-30 965
在 Vue 2 中，Element UI 提供了el-input组件用于输入框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中el-input组件的属性、事件和方法，并给出示例。
vue element ui input 自动获取焦点（解决只有第一次起作用问题，autofocus失效问题解决）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-21 4014
原因： autofocus是vue中input的原生属性,element也支持这种方法, 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。 解决方案： 借助动态绑定ref属性，在this.$nextTick调用focus()方法。 在线运行 <div id="app"> <div v-for="(item,i) in data"> {{item.id}}.{{item.text}}
element input focus()获取焦点无效？
weixin_55341181的博客
07-08 4294
有个业务场景需要需要点击表格单元格变成input编辑，点击其他地方input切换成span。如图：未编辑状态使用span显示 编辑状态切换成input 代码 在这里就出现了一个问题，那就是切换到input的时候 无法自动获取焦点，无法获取焦点的话就没办法点击其他地方关闭。在百度也找了很多办法，都是无效。最终的解决方案就是在html哪里把v-if改成v-show就解决了这个问题。修改代码.........
element ui 输入框 自动获取/失去焦点
weixin_59081597的博客
03-31 3577
标签加上ref实例名称 <el-input ref="input" v-model="searchData.name" placeholder="请输入搜索内容" suffix-icon="el-icon-search" /> 获取焦点 this.$nextTick(() => { this.$refs.input.fous() }) 失去焦点
如何解决element ui input输入框嵌套循环不聚焦问题
hxiaobaicai的博客
03-07 303
如何解决element ui input输入框嵌套循环不聚焦问题
【JavaScript源代码】element input输入框自动获取焦点的实现.docx
12-28
在JavaScript和Vue.js开发中，有时我们需要实现一种功能，即当页面加载或特定事件发生时，使输入框（input）自动获取焦点。这样的需求在创建表单或评论系统时尤其常见，用户可以直接开始输入而无需手动点击输入框。...
vue_vueelement_
10-03
Element UI 是一套基于 Vue.js 的组件库，专门用于快速开发美观、易用的Web应用程序。它提供了丰富的UI组件，如表格、按钮、提示、下拉菜单等，极大地提高了开发效率。 在Vue.js中，钩子函数是Vue实例生命周期的一...
element-ui tree结构实现增删改自定义功能代码
10-14
Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的场景中，我们需要在Tree组件的基础上增加编辑、删除和新增节点的功能。 首先，...
Vue项目中使用jquery的简单方法
10-16
由于Element UI的`el-autocomplete`组件存在一些限制，我们需要自定义事件处理来完成这些功能。 我们可以创建一个Vue组件，然后使用jQuery来监听和处理输入框的焦点、鼠标点击和内容变更事件。在组件的`mounted`...
vue实现表单数据验证的实例代码
01-09
Element UI 是基于Vue的一个UI组件库，提供了丰富的表单元素和布局工具。以下是如何使用`el-form`进行数据验证的详细步骤： 1. **定义表单模型**： 在`data`函数中，定义一个对象`loginForm`，它包含了表单字段，...
带分页的el-table获取全选的勾选状态
代码青春
07-23 159
带分页的el-table获取全选的勾选状态
element-plus时间组件el-date-picker只能选择当前及之前日期
weixin_52583582的博客
07-24 245
默认是这样的，需要绑定disabled-date属性，并且赋值。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 776
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
如何用vue把写好的一些标签往el-input里面放 要求一定标签放在input输入框焦点光标内，
06-06
你可以使用 Vue 的插值表达式和模板语法来实现在 input 输入框焦点光标内放置标签的需求。具体实现步骤如下： 1. 在 Vue 的 data() 函数中定义一个字符串类型的变量，用于存储 input 输入框中的内容。 2. 在 input 标签中使用 v-model 指令将 input 的值绑定到 data() 中定义的变量上。 3. 在 input 标签后面添加一个 span 标签，用于显示要插入的标签。 4. 使用 @click 事件监听器绑定一个函数，用于将要插入的标签插入到 input 输入框中，并设置光标位置。 5. 在绑定的函数中，使用 document.execCommand() 方法将标签插入到 input 输入框中，使用 Selection 对象设置光标位置。 下面是一个简单的示例代码： ``` <template> <div> <div> <label>输入框：</label> <el-input v-model="inputValue" ref="input"></el-input> <span @click="insertTag">@{{ tag }}</span> </div> </div> </template> <script> export default { data() { return { inputValue: '', tag: '<strong></strong>' } }, methods: { insertTag() { let input = this.$refs.input.$refs.input let startPos = input.selectionStart let endPos = input.selectionEnd let sel = window.getSelection() let range = document.createRange() input.focus() document.execCommand('insertHTML', false, this.tag) range.setStart(input, startPos + 8) range.setEnd(input, startPos + 8) sel.removeAllRanges() sel.addRange(range) } } } </script> ``` 在上面的代码中，我们使用了 element-ui 的 el-input 组件，通过 v-model 指令将 input 的值绑定到 inputValue 变量上。在 input 后面添加了一个 span 标签，用于显示要插入的标签。在 span 标签上使用 @click 事件监听器绑定了 insertTag() 函数，该函数用于将标签插入到 input 输入框中，并设置光标位置。 在 insertTag() 函数中，我们首先获取了 input 输入框的 DOM 对象，并获取了光标位置。然后使用 document.execCommand() 方法将标签插入到 input 输入框中，最后使用 Selection 对象设置光标位置。需要注意的是，由于插入的是带标签的 HTML 代码，所以需要将光标位置进行相应的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值