vue中的input框点击后不聚焦问题
作者:黄金钢铁侠 时间:2024-05-02 16:33:12
input框点击后不聚焦问题
废话不多说直接上代码
哪个地方要写input框 就直接把这一部分代码放上 里面双向绑定的值和事件换上自己定义的
?<div class="item" @click.stop.prevent="inputPaentClick('input1')">
? ? ? ? <input
? ? ? ? ? ref="input1"
? ? ? ? ? placeholder="请输入搜索关键词"
? ? ? ? ? v-model="value"
? ? ? ? ? @keydown.enter="searchs"
? ? ? ? />
? ? ? </div>
在方法里写上这些
? inputPaentClick(refName) {undefined
? ? ? //解决input框双击才可以聚焦问题
? ? ? this.$nextTick(() => {undefined
? ? ? ? this.$refs[refName] && this.$refs[refName].focus();
? ? ? });
? ? }
只复制这些就行 input里绑定的事件以及要实现的方法 写在这个事件同级的地方
vue input聚焦的坑
点击按钮,使某个input框聚焦
1、给 input 加个 ref 属性,写个 button 按钮并加个点击事件
<input type="text" ref="input">
<button @click="onFocus"></button>
2、onFocus方法:
onFocus() {
? ? this.$refs.input.focus()
? }
加载页面时自动聚焦
mounted() {
? ? this.$nextTick(() => {
? ? ? this.$refs.input.focus()
? ? })
? },
【坑】
如果input框是隐藏的,点击某个元素让input框显示,同时聚焦,这个时候聚焦效果就不会实现。
解决办法:
点击元素的时候用个变量做标识,然后再watch里面去监听这个变量,通过判断这个变量的值来聚焦,
可以写在setTimeout里面,或者写在nextTick里面即可解决问题;代码如下
watch: {
? ? isClick(){
? ? ? if(this.isClick == false) {
? ? ? ? setTimeout(() => {
? ? ? ? ? this.$refs.input.focus()
? ? ? ? }, 100);
?? ??? ?// this.$nextTick(() => {
? ? ? ? // ? this.$refs.input.focus()
? ? ? ? // });
? ? ? }
? ? }
? }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。
来源:https://blog.csdn.net/hope_lucky/article/details/123690548
标签:input框,点击,不聚焦
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
js正则的几个基本概念
2007-09-30 20:02:00
Pytorch创建张量的四种方法
2023-11-20 15:25:36
Redux saga异步管理与生成器详解
2023-07-24 02:53:52
![](https://img.aspxhome.com/file/2023/9/55999_0s.png)
写给喜欢用DW编写CSS人的一些建议
2008-05-19 12:09:00
PyTorch梯度裁剪避免训练loss nan的操作
2022-02-16 10:56:23
分析MySQL抛出异常的几种常见解决方式
2024-01-16 14:00:59
![](https://img.aspxhome.com/file/2023/6/126296_0s.png)
python面向对象实现名片管理系统文件版
2022-11-25 16:27:45
![](https://img.aspxhome.com/file/2023/1/104791_0s.png)
Python学习之asyncore模块用法实例教程
2023-07-30 14:16:46
JavaScript开发人员的10个关键习惯小结
2024-04-18 09:51:09
深入分析Mysql中limit的用法
2024-01-20 12:56:08
详解TensorFlow训练网络两种方式
2021-06-24 00:18:23
Python+matplotlib+numpy实现在不同平面的二维条形图
2023-11-11 21:01:58
![](https://img.aspxhome.com/file/2023/8/64338_0s.jpg)
python 中Arduino串口传输数据到电脑并保存至excel表格
2022-05-17 05:41:11
![](https://img.aspxhome.com/file/2023/6/69056_0s.png)
网页设计布局原则
2010-04-20 17:18:00
iframe的防插与强插(二)
2009-03-03 12:37:00
MySQL多表查询机制
2024-01-25 22:38:33
![](https://img.aspxhome.com/file/2023/3/69843_0s.png)
python3格式化字符串 f-string的高级用法(推荐)
2023-04-13 00:56:55
关于Go 空结构体的 3 种使用场景
2024-05-22 17:45:21
![](https://img.aspxhome.com/file/2023/9/125099_0s.png)
详解git reset --hard 和 git reset --soft区别
2023-04-06 09:04:39
![](https://img.aspxhome.com/file/2023/6/132356_0s.png)
Vue Echarts实现柱形图从右向左滚动效果
2023-07-02 16:59:19
![](https://img.aspxhome.com/file/2023/1/139871_0s.gif)