当前位置: 首页 > 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);},

http://www.lryc.cn/news/2378235.html

相关文章:

  • LLM笔记(六)线性代数
  • Linux——UDP/TCP协议理论
  • Go语言爬虫系列教程(一) 爬虫基础入门
  • PromptIDE提示词开发工具支持定向优化啦
  • 多返回值(Multiple Return Values)- 《Go语言实战指南》
  • 致远OA人事标准模块功能简介【附应用包百度网盘下载地址,官方售价4W】
  • Python-简单网络编程 I
  • 鸿蒙北向应用开发: deveco5.0 创建开源鸿蒙项目
  • 数据库故障排查指南:从入门到精通
  • 国产linux系统(银河麒麟,统信uos)使用 PageOffice自定义Word模版中的数据区域
  • 基于基金净值百分位的交易策略
  • 2025蓝桥杯JAVA编程题练习Day8
  • 通信安全堡垒:profinet转ethernet ip主网关提升冶炼安全与连接
  • DL00219-基于深度学习的水稻病害检测系统含源码
  • 在24GB显存大小的GPU上运行27GB的Pytorch模型
  • 【数据机构】2. 线性表之“链表”
  • 【51单片机中断】
  • JavaSE基础语法之方法
  • 华为网路设备学习-22(路由器OSPF-LSA及特殊详解)
  • go-数据库基本操作
  • vue 中绑定样式 【style样式绑定】
  • 印刷业直角坐标型码垛机器人系统设计与应用研究
  • Mysql存储过程(附案例)
  • 【Web应用】Vue 项目前端项目文件夹和文件介绍
  • Stratix 10 FPGA DDR4 选型
  • Rust 输出到命令行
  • 费曼技巧及提高计划
  • 扩展:React 项目执行 yarn eject 后的 config 目录结构详解
  • CMU-15445(4)——PROJECT#1-BufferPoolManager-Task#2
  • 百度智能云千帆携手联想,共创MCP生态宇宙