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

微信小程序 密码框改为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.xdnf.cn/news/425539.html

相关文章:

  • 基于STM32、HAL库的TLV320AIC3204IRHBR音频接口芯片驱动程序设计
  • k8s之k8s集群部署
  • 互信息与KL散度:差异与应用全解析
  • 基于C语言实现网络爬虫程序设计
  • Docker常用命令及示例大全
  • Rimworld Mod教程 武器Weapon篇 近战章 第二讲:生物可用的近战来源
  • Houdini安装SideFX Labs工具架
  • c语言第一个小游戏:贪吃蛇小游戏07
  • 为什么hadoop不用Java的序列化?
  • Git命令起别名
  • OPC UA 协议介绍
  • Java—— 双列集合 Map
  • Logisim实验--华科计算机组成原理(保姆级教程) 头歌-存储系统设计实验(汉字库存储芯片扩展实验、MIPS寄存器文件设计)
  • 【Unity】协程的同步使用
  • 第六天 车载应用开发
  • 【速通RAG实战:进阶】10.RAG 进化论:Advanced与Modular架构解锁智能问答新维度
  • 激光雷达定位算法在FPGA中的实现——section3 Matlab实现和校验
  • HarmonyOS 【诗韵悠然】AI古诗词赏析APP开发实战从零到一系列(一、开篇,项目介绍)
  • 【LeetCode 热题 100】二叉树的最大深度 / 翻转二叉树 / 二叉树的直径 / 验证二叉搜索树
  • React vs Vue:点击外部事件处理的对比与实现
  • 用vite脚手架建立 前端工程
  • 服务器制造业中,L2、L6、L10等表示什么意思
  • Shell脚本实践(修改文件,修改配置文件,执行jar包)
  • 互联网大厂Java求职面试:优惠券服务架构设计与AI增强实践-4
  • R²AIN SUITE 如何破解制造业效率难题,制造业效率提升新思路​
  • 配置Hadoop集群-上传文件
  • python_竞态条件
  • Gemini 2.5 推动视频理解进入新时代
  • 多模态大语言模型arxiv论文略读(七十三)
  • 二维差分(主要看原数组与差分数组的关系)