【uniapp】如何手动实现让input文本框聚焦

2023-11-07

开发中遇到一个问题,希望在每次操作页面完成后,input文本框都能自动聚焦,那么问题来了,应该怎么做,接下来请继续往下看。

也许大多数同学都会这么做,尝试过修改文本框属性focustrue,但是没有效果,参考如下

<template>
	<view class="content">
		<!-- 此处省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" focus="true"/>
		</view>
		<!-- 此处省略... -->
	</view>
</template>

尝试手动实现,调用focus事件,想到它可不像之前的h5项目,是没有操作dom的方法,所以暂时搁置,在网上找了解决方案都不合适

看来只有自己解决了,先理清一下思路,知道聚焦状态吧,如果直接设置属性focus一直为true好像不太对,尝试去设置状态更新,参考如下

<template>
	<view class="content">
		<!-- 此处省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" :focus="isInputFocus" @blur="onblur"/>
		</view>
		<!-- 此处省略... -->
	</view>
</template>

发现了么,在input输入框组件上,设置属性focus变量isInputFocus可更新,然后添加一个属性方法onblur()

应该这样做,当输入框失去焦点后,需要调用一下方法,去更新一下状态,参考如下代码

export default {
		data() {
			return {
				//...
				value:'',
				isInputFocus:true,
			};
		},
		methods:{
			onblur(){
				this.isInputFocus=false;
			},
			//...
		}
	}

当操作完成后,手动设置输入框聚焦,执行代码如下,难道不会想到可以这样用么!

this.$nextTick(()=>{
	this.value='';
	this.isInputFocus=true;
})

请添加图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【uniapp】如何手动实现让input文本框聚焦 的相关文章

  • Web测试是在测什么?容易被忽视的小细节总结!

    2024软件测试面试刷题 这个小程序 永久刷题 靠它快速找到工作了 刷题APP的天花板 CSDN博客 文章浏览阅读2 2k次 点赞85次 收藏11次 你知不知道有这么一个软件测试面试的刷题小程序 里面包含了面试常问的软件测试基础题 web自
  • 监控显卡显存(python代码)

    一 前言 我和我同学的代码 分别占用14G显存 而显卡的显存只有24G 没有办法同时跑 所以 他先跑 我的代码时刻监控显存的使用情况 只要显卡显存大于14G 我的代码就自动启动 二 代码 import pynvml import time
  • vue 点击改变数组中选中的icon颜色(结合拖拽实现)

    1 vue 点击改变数组中选中的icon颜色 在Vue中 可以通过使用v bind指令来动态地修改元素的样式 要根据点击事件来改变数组中选中图标的颜色 首先需要定义一个data属性来存储当前被选中的索引值或者其他相关信息 然后 在模板中使用
  • uni.ownloadFile下载下来的文件没有后缀名

    let filepathss plus io convertLocalFileSystemURL data tempFilePath plus io resolveLocalFileSystemURL filepathss function
  • python画彩虹和小熊

    前言 今天 我们来画两个简单的图形 一 彩虹 彩虹 又称天弓 客家话 天虹 绛等 简称为 虹 是气象中的一种光学现象 当太阳光照射到半空中的水滴时 光线被折射及反射 在天空上形成拱形的七彩光谱 雨后常见 形状弯曲 通常为半圆状 色彩艳丽 东
  • Vue + Element-ui组件上传图片报错问题解决方案

    在使用Vue和Element ui组件上传图片时 可能会遇到一些报错问题 以下是一些常见的问题及解决方案 报错 TypeError Cannot read property name of undefined 解决方案 这个错误通常是因为在
  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save
  • Firefox浏览器-渗透测试插件推荐

    在日常工作中可能需要一些浏览器插件辅助我们做工作 下面是比较好的 当然不一定对你有用 找到适合自己的即可 FoxyProxy FoxyProxy是一个高级的代理管理工具 它完全替代了Firefox有限的代理功能 它提供比SwitchProx
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • 【面试】 前端竞争压力大?揭秘让你们学后端的真实动机!

    前端开发属于程序员吗 网友是这样回答的 看完前端同学的评论 我悟了 你们让人都去学后端卷 然后减小前端竞争压力是吧 哈哈哈 你们这帮老6 于是我去拿出了我收藏的 某前端招聘JD来盘一盘 那些觉得 是个人都能干前端 的同学们想必已经熟练掌握了
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码
  • 每天10个前端小知识 <Day 7>

    前端面试基础知识题 1 什么是尾调用优化和尾递归 尾调用的概念非常简单 一句话就能说清楚 就是指某个函数的最后一步是调用另一个函数 function f x return g x 上面代码中 函数f的最后一步是调用函数g 这就叫尾调用 尾调
  • 「网络安全渗透」如果你还不懂CSRF?这一篇让你彻底掌握

    1 什么是 CSRF 面试的时候的著名问题 谈一谈你对 CSRF 与 SSRF 区别的看法 这个问题 如果我们用非常通俗的语言讲的话 CSRF 更像是钓鱼的举动 是用户攻击用户的 而对于 SSRF 来说 是由服务器发出请求 用户 日 服务器
  • 基于java的饮食分享平台系统设计与实现

    基于java的饮食分享平台系统设计与实现 I 引言 A 研究背景和动机 近年来 随着人们生活水平的提高和健康意识的增强 饮食健康已经成为越来越多人的关注焦点 因此 一个方便快捷的饮食分享平台就显得尤为重要 基于Java的饮食分享平台系统设计
  • 点击存储到固定时间清除存储

    这段代码 无意间想到的 随便写了下来 运行 根据点击之后传递一个参数 将他存入本地存储 方便测试为10秒 10秒后触发下一个事件 清除本地存储 结束
  • 低代码配置-属性配置面板设计

    模块设计 tab项切换 组件基础属性 组件数据属性 组件事件属性 表单属性 模块输出函数设计 tab切换函数 列表表单属性 数据来源 调用接口时一次赋予 无需使用selectItem 如需使用 归入基础属性 列表标题 是否展示筛选区域
  • chrome浏览器无法在地址栏输入内容搜索问题解决--图文

    关于日常遇到的小问题解决记录一下 1 导航栏录入信息后跳转错误 2 解决办法 默认百度搜索引擎地址错误 百度正确的搜索格式是 http www baidu com s wd s chrome浏览器中百度的搜索格式是 http www bai
  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 数据
  • 每日变更的最佳实践

    在优维公司内部 我们采用发布单的方式进行每天的应用变更管理 这里给各位介绍优维的最佳实践 变更是需要多角色合作的 而且他是整体研发流程的一部分 在优维内部 我们坚持每日变更 打通开发环节到最终发布上线的全过程 在保证质量的前提下 尽可能提升
  • 【前端】canvas图片加文字

    注释标记了操作步骤 import React Component createRef from react class CertifyImgRender extends Component bgRef createRef

随机推荐

  • 网站部署到服务器后乱版,nginx配置双网站后,域名乱跳转的解决方法

    前言 今天 小焦给大家要讨论的问题就是一台服务器配置两个网站后 域名错误的问题 因为个人需求 我在一台nginx配置的服务器上部署了两个网站 一个是纯html和css写的静态网站 一个就是我用wordpress做的这个现在的这个个人博客网站
  • 【数字信号处理2】IIR 滤波器设计

    一 实验目的 1 掌握冲激响应法和双线性变换法设计IIR滤波器的原理及具体设计方法 熟悉用双线性设计法设计低通 带通和高通IIR数字滤波器的计算机程序 2 熟悉模拟Butterworth滤波器的设计 掌握冲激响应法和双线性变换法设计数字II
  • C++——命名空间(namespace)

    目录 1 C语言命名冲突 2 命名空间定义 3 命名空间使用 可能大家在看别人写的C 代码中 在一开始会包这个头文件 include
  • Mac下抓包工具Charles的使用

    一 简介 Charles是目前最强大的http调试工具 在界面和功能上远强于Fiddler 1 1 界面功能 工具条包含了Charles的大部分功能 右键请求出现菜单 Charles的右键菜单功能比fiddler强大太多了 双击请求进入列表
  • Python+Selenium框架设计篇1- 价值好几K的框架,不看别后悔,过时不候

    1 什么是自动化测试框架 在了解什么是自动化测试框架之前 先了解一下什么叫框架 框架是整个或部分系统的可重用设计 表现为一组抽象构件及构件实例间交互的方法 另一种定义认为 框架是可被应用开发者定制的应用骨架 前者是从应用方面 而后者是从目的
  • 8579 链式线性表的基本操作

    8579 链式线性表的基本操作 题干 8579 链式线性表的基本操作 时间限制 1000MS 代码长度限制 10KB 提交次数 5567 通过次数 2176 题型 编程题 语言 G GCC Description 编写算法 创建一个含有n个
  • 初步认识Thread网络

    Thread网络 说明 本文档内容参考自 https openthread google cn guides 是基于这个官方文档内容进行的添加一些个人理解的介绍文档 文档内容仅能作为对thread 网络的一个概念学习和参考 基本概念 Thr
  • 前端页面如何适应不同屏幕分辨率常用做法

    为什么80 的码农都做不了架构师 gt gt gt 1 根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少 但我们CSS布局时仍然需要至少考虑1024px分辨率用户 2 使用css media 属性针对不同的屏幕加载不同
  • MarkDown软件Typora图片上传解决方案:Typora+PicGo图床

    MarkDown软件Typora图片上传解决方案 Typora PicGo图床 一 问题描述 今天在网上学习Java开发环境配置 想在CSDN上写篇博客记录安装及环境配置过程 经过在网上的调研 相当一部分的程序员都喜欢用一款名为 Typor
  • unity 射线检测真机失效_用Unity的RaycastCommand实现子弹的碰撞检测碰到的大坑

    首先放个视频来展示一下 星之海的阿斯特莉娅 最新的开发进度吧 加入了防空系统 可以拦截敌人的导弹 https www bilibili com video BV1i541167BY 假装这里有视频 b站换成bv号了 这里好像还不支持 然后来
  • 计算机毕业设计-基于SSM的音乐推荐管理系统

    项目摘要 中国风音乐推介网站近年来已成为风靡全球的新兴艺术形式 国内涌现出了大批优秀 有才华的爱好者和许多经久不衰的经典作品 中国风音乐推介网站的兴起打破了音乐界格局 也突破了原有分类唱法发展中的瓶颈 为声乐艺术的发展开辟了新篇章 这种新兴
  • 关于mapper在service层注入报错

    关于mapper在service层注入报错 有如下三种解决的方案 1 在主类Application class上添加 MapperScan basePackages 自己的mapper包 2 在mapper接口上添加 Mapper 和第一种
  • MySQL优化五-高性能的8个索引策略

    正确创建和使用索引策略是实现高性能查询的基础 本文总结7个索引策略 一 独立的列 独立的列是指索引不能是表达式的一部分 也不能是函数的参数 mysql gt select id from actor where id 1 5 错误 mysq
  • 用Python快速将ppt制作成配音视频课件的方法

    老猿Python博文目录 一 引言 老猿从来没有录播个视频课件 但最近有要求在一周内必须录制一个视频课件 为此花了3天时间准备ppt 花了一个小时录播了一个20多分钟的课件 由于第一次干这个活 讲课时情绪还是有点紧张 导致录播的语音出现了各
  • ABAP OPEN SQL详解

    本章目录 概要 OPEN SQL 读取数据 1 概要 1 1 R 3体系结构 学习SQL之前先了解一下R 3体系结构 如 图1 所示 SAP R 3一共分为三层结构 其中应用层和数据库层由单独的系统构成 1 表示层 表示层 Presenta
  • Spring IOC容器初始化主流程

    1 Spring IOC容器体系 IoC容器是Spring的核 模块 是抽象了对象管理 依赖关系管理的框架解决 案 Spring 提供了很多的容器 其中 BeanFactory 是顶层容器 根容器 不能被实例化 它定义了所有 IoC 容器
  • 现代cpu的合并写技术对程序的影响

    对于现代cpu而言 性能瓶颈则是对于内存的访问 cpu的速度往往都比主存的高至少两个数量级 因此cpu都引入了L1 cache与L2 cache 更加高端的cpu还加入了L3 cache 很显然 这个技术引起了下一个问题 如果一个cpu在执
  • C++之关于rand()每次产生随机数都相同问题

    C 的随机数函数rand是一个伪随机数 根据固定的初始种子和算法计算得出 所以每次运行获取到的随机数序列是相同的 要解决这个问题 需要设置一个随机数种子 一般我们使用当前时间作为种子 include
  • go-cqhttp:[禁止登录]登录失败,建议升级最新版本后重试,或通过问题反馈与我们联系。(错误码:45)

    token失效 禁止登录 登录失败 建议升级最新版本后重试 或通过问题反馈与我们联系 错误码 45 禁止登录 登录失败 建议升级最新版本后重试 或通过问题反馈与我们联系 使用go cqhttp开发QQ机器人的时候遇到的问题 登录的时候报错
  • 【uniapp】如何手动实现让input文本框聚焦

    开发中遇到一个问题 希望在每次操作页面完成后 input文本框都能自动聚焦 那么问题来了 应该怎么做 接下来请继续往下看 也许大多数同学都会这么做 尝试过修改文本框属性focus为 true 但是没有效果 参考如下