微信小程序 密码框改为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);
  },
相关推荐
weixin_lynhgworld43 分钟前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者2 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮4 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero11 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域14 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld1 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析1 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx9910131 天前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量池用户运营研究
人工智能·小程序·开源