Vue3+Element Plus，el-input自动聚焦

最新推荐文章于 2024-03-31 10:32:57 发布
最新推荐文章于 2024-03-31 10:32:57 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50666077/article/details/132203149
版权

Vue3+Element Plus，el-input自动聚焦

<el-input />外层嵌套了div,导致官方提供的autofocus属性失效。所以使用调用focus函数。
实现方法

<el-input ref="inputRef" v-model="inputContent" clearable />
定义一个函数focusInput，并触发就可以
const focusInput = () => { nextTick(() => { inputRef.value.focus() }) }
Tips:
写在setTimeout函数或者onMounted()函数里都不生效。focusInput需要不断的被调用才行。

欢脱的小猴子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 ... let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str
Vue3实现页面刷新input自动聚焦的两种方式
weixin_68714627的博客
11-02 2058
v-focus在文件夹src/utils下新建文件夹directives存放聚焦的js文件// 确保元素挂载，数据被解析后，el.focus();});组件模板中组件脚本代码中// 若使用的是vue3的setup语法糖需要分出来写
Vue ElementPlus Input 输入框
最新发布
小楼一夜听春雨，深巷明朝卖杏花
03-31 1090
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。不支持 v-model 修饰符。可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。使用show-password属性即可得到一个可切换显示隐藏的密码框。使用clearable属性即可得到一个可清空的输入框。input 为受控组件，它总会显示 Vue 绑定值。带有图标标记输入类型。
6.30（nextTick）
sbr_jonny_jostad的博客
06-30 59
点击自动获取焦点失败，点击后无法获取焦点，无报错。 用ref标记节点，再在定时器或nextTick里使ref获取的节点获取焦点。 只要两行代码的事，无论如何没有头绪，怎么都想不明白问题所在。 事实上标记的是input，也是使input聚焦，这个方法写在btn的点击事件里。我标记了btn。 .........
Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
热门推荐
钢铁之家
10-31 3万+
最近，碰到一个问题，就是输入框旁边有一个编辑按钮，点击时，才可以对输入框进行编辑： 要实现的效果： 为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。 查了网上的一些文档，说是跟dom的渲染顺序和数据的缓存有点儿关系，至于深层次的原因，还没查到，希望有知道的朋友，不吝告知。 然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el...
el-input自动获取焦点
qq_42148925的博客
06-23 3010
el-input自动获取焦点
el-input自动获取焦点功能
qq_42808095的博客
07-25 1637
自动获取焦点
Element——el-input自动聚焦
六耳石猴的博客
09-03 6225
问题描述 开发过程中有如下用户体验优化需求： 可编辑文本最开始以文本形式展示 点击文本后切换输入控件 输入控件显示后自动聚焦，开始输入 输入完成，输入控件失去焦点时自动隐藏并切换会文本显示 遇到的坑 思路就是通过点击事件进行显隐的切换，并是输入框获取焦点。于是有如下代码： <template> <div @dblclick="ondbclick"> <div v-show="!isEdit"></div> <div v-show="isEd
Vue3+ts el-input 上来自动聚焦
weixin_60906876的博客
11-08 308
【代码】Vue3+ts el-input 上来自动聚焦。
Vue+element 解决浏览器自动填充记住的账号密码问题
12-10
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉 不行,我的代码必须由我...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
01-19
以CSS样式为主，也会涉及到Vue组件和element组件的使用。 对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示...
vue+element+Table 每行多个单元格双击修改
09-17
vue+elementTable每行多个单元格双击修改 绑定@cell-dblclick双击事件，显示input进行修改，失焦绑定@blur事件
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如...el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
Vue.js：el-input自动获取焦点通过自定义指令实现v-focus
彭世瑜的博客
12-20 1815
如果使用el-input需要做如下改进。Vue.js2 官网提供的示例。自动获取焦点，效果不是很好。
使el-form中的el-input自动获取焦点
Monster_ixx的博客
04-13 6766
由于不是很懂Vue，在写这么一个dialog的时候遇到了巨多问题，本来以为几十分钟就能搞定硬生生搞了几个小时 遇到的其中一个问题就是el-dialog聚焦时出现问题，ElementUI官网给出的例子是这样的： <template> <el-input class="input-new-tag" v-if="inputVisible" v-model="inputVa...
element-ui el-form中的el-input自定义自动获取焦点
weixin_47541876的博客
05-11 1218
el-input自定义自动获取焦点 <el-form-item prop="username"> <el-input v-model.trim="form.username" v-focus style="margin-top: 20px" type="text" placeholder="请输入用户名"
el-input设置自动聚焦this.$refs.xxx.focus is not a function报错
qq_45821882的博客
08-15 2485
碰到一个需求，在中，使用});出现了报错。具体报错为打印一下this.$refs.promptInput发现有值，但是找不到focus方法问题可能在于直接给el-input绑定一个ref取到的是textarea外面的那层div并没有真正的找到textarea分析一下 this.$refs.promptInput 的打印值，this.$refs?.$refs?});
vue3+element-plus，el-input输入框限制输入1-100的数字，其余不可输入
07-14
您可以使用 Vue3 和 Element Plus 的组合来实现输入框限制输入1-100的数字，其余不可输入的功能。以下是一个示例代码： ```vue <template> <el-input v-model="inputValue" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleInput(value) { // 移除非数字字符 let newValue = value.replace(/[^\d]/g, ''); // 限制输入范围为1-100 if (newValue === '' || (parseInt(newValue) >= 1 && parseInt(newValue) <= 100)) { this.inputValue = newValue; } }, }, }; </script> ``` 上述代码中，我们使用了 `el-input` 组件来显示和获取用户输入的值。在 `handleInput` 方法中，我们首先使用正则表达式将非数字字符移除，然后判断新的值是否为空或在1-100的范围内。如果是，则更新 `inputValue` 的值，否则不更新。 通过以上代码，您可以实现在输入框中限制输入1-100的数字，其余字符将无法输入。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值