vue中的input框点击后不聚焦问题
作者:黄金钢铁侠 发布时间:2024-05-02 16:33:12
标签:input框,点击,不聚焦
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
0
投稿
猜你喜欢
- 我就废话不多说了,直接上代码吧!import cv2import timecap = cv2.VideoCapture(0)cap.set(
- PHP Date/Time 简介Date/Time 函数允许您从 PHP 脚本运行的服务器上获取日期和时间。您可以使用 Date/Time
- 字符串类型是python里面最常见的类型,是不可变类型,支持单引号、双引号、三引号,三引号是一对连续的单引号或者双引号,允许一个字符串跨多行
- 1、词表映射无论是深度学习还是传统的统计机器学习方法处理自然语言,都需要先将输入的语言符号(通常为标记Token),映射为大于等于0、小于词
- QSS介绍前言QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器
- 本文实例讲述了python 装饰器功能与用法。分享给大家供大家参考,具体如下:1、必备#### 第一波 ####def foo(): &nb
- Pygame 中提供了一个draw模块用来绘制一些简单的图形状,比如矩形、多边形、圆形、直线、弧线等。pygame.draw模块的常用方法如
- 1. TinyMCE免费,开源,轻量的在线编辑器,基于 javascript,高度可定制,跨平台。2. FCKEditor免费,开源,用户量
- PyQt5布局控件QFormLayout简介QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表
- 一. XSL入门1.XSL---XML的样式表 HTML网页使用预先确定的标识(tags),这就是说所有的标记都有明确的含义,例如<p
- transforms.CenterCrop(size)将给定的PIL.Image进行中心切割,得到给定的size,size可以是tuple,
- 前段时间因为忙一些其它的事情,分享的有些少,最近学习一下redis在Go语言开发中的应用。一、理论知识Redis是一个开源的、使用C语言编写
- aspjpeg组件官方下载地址:http://www.persits.com/说明: 1、aspjpeg能对图片水印进行透明度调整
- 如何显示存储在BLOB字段中的图像?showimges.asp' 在浏览器上单独显示图像 <%@ 
- 本文实例讲述了python网络编程之数据传输UDP实现方法。分享给大家供大家参考。具体分析如下:一、问题:你觉得网络上像msn,qq之类的工
- 方法一:>>> str1 = '''Le vent se lève, il faut tenter
- 前言拖了这么久,最终还是战胜了懒惰,打开电脑写了这篇博客,内容也很简单,python实现字符串转整型的int方法python已经实现了int
- 参考:1.Basemap绘制中国地图2.Basemap生成的图中绘制轨迹使用CMA热带气旋最佳路径数据集,对我国周边的台风进行绘制impor
- 用Python发送126邮件,供大家参考,具体内容如下今天想做个自动化邮件提醒的功能,最近刚好在学习python,都说python那么强大,
- 可以使用 XDR(简化 XML-Data)架构创建关系数据的 XML 视图。然后可以使用 XPath 查询来查询这些视图。这类似于使用 CR