当前位置: 首页 > article >正文

微信小程序 密码框改为text后不可见,需要点击一下

这个问题是做项目的时候碰到的。

密码框常规写法:

<view class="inputBox"><view class="input-container"><input type="{{inputType}}" placeholder="请输入密码" data-id="passwordValue" bindinput="getinput" value="{{passwordValue}}" placeholder-style="color:#ccc8c8" /><image class="eye-icon" src="{{isPasswordVisible ? '/images/open-eye.png' : '/images/closed-eye.png'}}" bind:touchstart="onEyeTouchStart" bind:touchend="onEyeTouchEnd"/></view>
</view>

函数:onEyeTouchStart 和 onEyeTouchEnd 的实现:

onEyeTouchStart() {const passwordValue = this.data.passwordValue;this.setData({inputType: 'text',isPasswordVisible: true});},onEyeTouchEnd() {const passwordValue = this.data.passwordValue;this.setData({inputType: 'password',isPasswordVisible: false,});},

然后就会出现以上的问题(真机上),后来查了不少资料,有个方法可以解决这个问题:

那就是改变input属性后刷新一下,我改进了一下,确实解决了这个问题,特此记录。

改进后的代码:

onEyeTouchStart() {const passwordValue = this.data.passwordValue;this.setData({inputType: 'text',isPasswordVisible: true,passwordValue:''},()=>{this.setData({passwordValue:passwordValue});});console.log('in onEyeTouchStart,inputType:',this.data.inputType,'isPasswordVisible',this.data.isPasswordVisible);},onEyeTouchEnd() {const passwordValue = this.data.passwordValue;this.setData({inputType: 'password',isPasswordVisible: false,passwordValue:''},()=>{this.setData({passwordValue:passwordValue});});console.log('in onEyeTouchEnd,inputType:',this.data.inputType,'isPasswordVisible',this.data.isPasswordVisible);},

相关文章:

微信小程序 密码框改为text后不可见,需要点击一下

这个问题是做项目的时候碰到的。 密码框常规写法&#xff1a; <view class"inputBox"><view class"input-container"><input type"{{inputType}}" placeholder"请输入密码" data-id"passwordValue" bindin…...

LLM笔记(六)线性代数

公式速查表 1. 向量与矩阵&#xff1a;表示、转换与知识存储的基础 向量表示 (Vectors): 语义的载体 在LLM中&#xff0c;向量 x ∈ R d \mathbf{x}\in\mathbb{R}^d x∈Rd 是信息的基本单元&#xff0c;承载着丰富的语义信息&#xff1a; 词嵌入向量 (Word Embeddings)&am…...

Linux——UDP/TCP协议理论

1. UDP协议 1.1 UDP协议格式 系统内的UDP协议结构体&#xff1a; 注1&#xff1a;UDP协议的报头大小是确定的&#xff0c;为8字节 注2&#xff1a;可以通过报头中&#xff0c;UDP长度将UDP协议的报头和有效载荷分离&#xff0c;有效载荷将存储到接收缓冲区中等待上层解析。 注…...

Go语言爬虫系列教程(一) 爬虫基础入门

Go爬虫基础入门 1. 网络爬虫概念介绍 1.1 什么是网络爬虫 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称网页蜘蛛、网络机器人&#xff0c;是一种按照一定规则自动抓取互联网信息的程序或脚本。其核心功能是模拟人类浏览网页的行为&#xff0c;通过发送网络…...

PromptIDE提示词开发工具支持定向优化啦

老粉们都知道&#xff0c;PromptIDE 是一款专门解决 AI 提示词生成和优化的工具&#xff0c;让 AI 真正听懂你在说什么&#xff0c;生成更符合预期的结果&#xff01; 我们这次更新主要争对提示词优化这一块&#xff0c;推出了不同提示词优化方向&#xff0c;贴近用户需求。 举…...

多返回值(Multiple Return Values)- 《Go语言实战指南》

Go 语言支持函数返回多个值&#xff0c;这一特性在实际开发中非常常见&#xff0c;尤其用于错误处理。 一、函数返回多个值的基本语法 func 函数名(参数列表) (返回值1类型, 返回值2类型, ...) {// 函数体return 值1, 值2, ... } 示例&#xff1a;计算商和余数 func divide(…...

致远OA人事标准模块功能简介【附应用包百度网盘下载地址,官方售价4W】

人事管理应用&#xff0c;围绕岗位配置、招聘管理、员工档案、入转调离、员工自助申报、数据信息管理等人力资源管理关键业务&#xff0c;构建全员可参与的人事工作协同平台&#xff0c;让人事从繁杂琐碎的事务中解脱出来&#xff0c;高质高效工作&#xff0c;让管理层清楚掌握…...

Python-简单网络编程 I

目录 一、UDP 网络程序1. 通信结构图2. Python 代码实现1&#xff09;服务器端2&#xff09;客户端 3. 注意 二、TCP 网络程序1. 通信结构图2. Python 代码实现1&#xff09;服务器端2&#xff09;客户端 3. 注意 三、文件下载1. PyCharm 程序传参1&#xff09;图形化界面传参2…...

鸿蒙北向应用开发: deveco5.0 创建开源鸿蒙项目

本地已经安装deveco5.0 使用5.0创建开源鸿蒙项目 文件->新建->新建项目 直接创建空项目,一路默认 next 直接编译项目 直接连接开源鸿蒙5.0开发板编译会提示 compatibleSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the dev…...

数据库故障排查指南:从入门到精通

1. 常见数据库故障类型 1.1 连接故障 数据库连接超时连接池耗尽网络连接中断认证失败1.2 性能故障 查询执行缓慢内存使用过高CPU使用率异常磁盘I/O瓶颈1.3 数据故障 数据不一致数据丢失数据损坏事务失败2. 故障排查流程 2.1 初步诊断 -- 检查数据库状态SHOW STATUS;SHOW PRO…...

国产linux系统(银河麒麟,统信uos)使用 PageOffice自定义Word模版中的数据区域

​ PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;、龙芯&#xff08;Mips、LoogArch&#xff09;芯片架构。 在实际的Wor…...

基于基金净值百分位的交易策略

策略来源&#xff1a;睿思量化小程序 基金净值百分位&#xff0c;是衡量当前基金净值在过去一段时间内的相对位置。以近一年为例&#xff0c;若某基金净值百分位为30%&#xff0c;意味着过去一年中有30%的时间基金净值低于当前值&#xff0c;70%的时间高于当前值。这一指标犹如…...

2025蓝桥杯JAVA编程题练习Day8

1. 路径 题目描述 小蓝学习了最短路径之后特别高兴&#xff0c;他定义了一个特别的图&#xff0c;希望找到图 中的最短路径。 小蓝的图由 2021 个结点组成&#xff0c;依次编号 1 至 2021。 对于两个不同的结点 a, b&#xff0c;如果 a 和 b 的差的绝对值大于 21&#xff0…...

通信安全堡垒:profinet转ethernet ip主网关提升冶炼安全与连接

作为钢铁冶炼生产线的安全检查员&#xff0c;我在此提交关于使用profinet转ethernetip网关前后对生产线连接及安全影响的检查报告。 使用profinet转ethernetip网关前的情况&#xff1a; 在未使用profinet转ethernetip网关之前&#xff0c;我们的EtherNet/IP测温仪和流量计与PR…...

DL00219-基于深度学习的水稻病害检测系统含源码

&#x1f33e; 基于深度学习的水稻病害检测系统 — 智能农业的未来&#xff0c;守护农田的每一寸土地&#xff01; &#x1f69c; 完整系统获取见文末 水稻病害检测&#xff0c;一直是农业领域的一大难题。传统的人工检测不仅耗时耗力&#xff0c;还容易因经验不足导致漏检或误…...

在24GB显存大小的GPU上运行27GB的Pytorch模型

在24GB显存大小的GPU上运行27GB的Pytorch模型 一.背景:显存不足时的破局之道1.1 大模型时代的显存困境1.2 CUDA统一内存的魔法二.性能测试数据深度解读关键发现:三.复现过程3.1 准备自定义分配器3.2 准备测试程序3.3 执行流程3.4 开始测试四.原理深度剖析4.1 统一内存的工作机…...

【数据机构】2. 线性表之“链表”

- 第 97 篇 - Date: 2025 - 05 - 16 Author: 郑龙浩/仟墨 【数据结构 2】 续上一篇 线性表之“顺序表” 文章目录 3 链表(用指针来首位相连)① 基本介绍② 分类 与 变量命名1 &#xff09;分类&#xff1a;2 &#xff09;大体介绍不同结构&#xff1a; ③ “单链表” 的实现:*…...

【51单片机中断】

目录 配置流程 1.在IE寄存器中开启总中断通道和需要的某中断通道 2.在TCON寄存器开启所用中断的触发方式 3.使用中断函数完成中断 4.若需要中断嵌套则在IP寄存器中配置 5.若需要使用串口的中断&#xff0c;则配置SCON寄存器 6.代码示例 配置流程 1.在IE寄存器中开启总…...

JavaSE基础语法之方法

方法 一、方法入门 1.方法定义 方法是一种语法结构&#xff0c;它可以把一段代码封装成一个功能&#xff0c;以便重复调用。 2.方法的格式 修饰符 返回值类型 方法名( 形参列表 ){方法体代码(需要执行的功能代码) }示例&#xff1a; public static int sum ( int a ,…...

华为网路设备学习-22(路由器OSPF-LSA及特殊详解)

一、基本概念 OSPF协议的基本概念 OSPF是一种内部网关协议&#xff08;IGP&#xff09;&#xff0c;主要用于在自治系统&#xff08;AS&#xff09;内部使路由器获得远端网络的路由信息。OSPF是一种链路状态路由协议&#xff0c;不直接传递路由表&#xff0c;而是通过交换链路…...

go-数据库基本操作

1. 配置数据库 package mainimport ("gorm.io/driver/mysql""gorm.io/gorm" ) #配置表结构 type User struct {ID int64 json:"id" gorm:"primary_key" // 主键ID自增长Username stringPassword string } #配置连接接信息 func…...

vue 中绑定样式 【style样式绑定】

style样式绑定 在 Vue 中&#xff0c;style 的绑定与 class 类似&#xff0c;也是通过 v-bind:style&#xff08;或简写 :style&#xff09;实现的&#xff0c;允许你动态地控制内联样式。Vue 对 style 做了非常智能的处理&#xff0c;支持对象、数组、字符串等多种语法&#…...

印刷业直角坐标型码垛机器人系统设计与应用研究

摘要 随着印刷行业自动化水平的提升&#xff0c;本文针对传统人工码垛存在的效率低、标准化程度不足等问题&#xff0c;提出基于直角坐标系的专用码垛机器人解决方案。重点阐述机械臂结构设计、运动控制系统及智能抓取装置三大核心模块&#xff0c;通过实际应用验证系统在速度、…...

Mysql存储过程(附案例)

​ 文章目录 存储过程概述1、基本语法2、变量①、系统变量②、用户自定义变量③、局部变量 3、流程控制语句①、if语句②、参数③、case语句④、while语句⑤、repeat语句⑥、loop语句⑦、cursor游标⑧、handler 4、存储函数 存储过程概述 存储过程是事先经过编译并存储在数据…...

【Web应用】Vue 项目前端项目文件夹和文件介绍

文章目录 ⭐前言⭐一、文件夹介绍&#x1f31f;1、.idea&#x1f31f;2、bin&#x1f31f;3、build&#x1f31f;4、node_modules&#x1f31f;5、public&#x1f31f;6、src ⭐二、文件介绍&#x1f31f;1、.editorconfig&#x1f31f;2、.env.development、.env.production、…...

Stratix 10 FPGA DDR4 选型

文章目录 前言DDR3 和 DDR4 的区别Micron 8Gb DDR4 规格书详解Micron 8Gb DDR4 编码规则ConfigurationDDR4 寻址原理 Speed Grade内存的频率MT/s 与 MHz&#xff1a;更好的内存速度衡量指标为什么 DDR4 的核心频率与 I/O 总线频率的比例是 1:4 呢&#xff1f; 带宽 Altera FPGA…...

Rust 输出到命令行

Rust 输出到命令行 引言 Rust 是一门系统编程语言&#xff0c;以其高性能、内存安全、并发支持和零成本抽象等特性而闻名。在开发过程中&#xff0c;将 Rust 程序的输出传递到命令行是常见的需求。本文将详细介绍 Rust 输出到命令行的多种方法&#xff0c;帮助读者掌握这一技…...

费曼技巧及提高计划

费曼技巧及提高计划 一、什么是费曼技巧&#xff1f; 费曼技巧&#xff08;Feynman Technique&#xff09;由诺贝尔物理学奖得主理查德费曼提出&#xff0c;是一种通过“以教代学”来彻底理解复杂概念的学习方法。其核心逻辑是&#xff1a; “如果你不能简单解释一件事&#x…...

扩展:React 项目执行 yarn eject 后的 config 目录结构详解

扩展&#xff1a;React 项目执行 yarn eject 后的 config 目录结构详解 什么是 yarn eject&#xff1f;React 项目执行 yarn eject 后的 config 目录结构详解&#x1f4c1; config 目录结构各文件作用详解env.jsgetHttpsConfig.jsmodules.jspaths.jswebpack.config.jswebpackDe…...

CMU-15445(4)——PROJECT#1-BufferPoolManager-Task#2

PROJECT#1-BufferPoolManager Task #2 - Disk Scheduler 在前一节我实现了 TASK1 并通过了测试&#xff0c;在本节中&#xff0c;我将逐步实现 TASK2。 如上图&#xff0c;Page Table&#xff08;页表&#xff09;通过哈希表实现&#xff0c;用于跟踪当前存在于内存中的页&am…...