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

小新1102025-05-14 16:33

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

密码框常规写法：

复制代码

<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后不可见，需要点击一下

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