ios 小程序兼容问题(密码显示隐藏)

2021-06-30  本文已影响0人  web30
隐藏密码 显示密码

出现的问题:
ios端,登录页密码显示隐藏,点击显示隐藏图标后密码清除,然后再点击用户名、密码后,小程序闪退。安卓端,点击密码显示隐藏没生效,把光标放在密码input框里去点击图标时,密码才显示出来。
但是,开发者工具上测试一直都是没有问题的。

问题的原因:
一般情况下,我们都认为是<input> 中的type属性控制着 password或者text 等 <input>属性,但是!小程序就是有点特殊,它并不是由 type 来控制的,而是由 password属性控制的,当password = "true"的时候 ,是password类型;当password="false"的时候,默认是text类型。

代码:

// wxml
<form class="form-content">
  <view class="form-account hairline-bottom">
  <image src="../../../images/user-name.png" class="account-img"></image>
    // model:value是小程序里简易双向绑定
    <input model:value="{{ userName }}" type='text' name="input" placeholder="请输入用户名" class="form-input" /></view>

   <view class="form-password hairline-bottom">
      <view class="form-psd">
         <image src="../../../images/lock.png" class="account-img"></image>
         // 主要是根据 passwords 属性来控制的
         <input password='{{passWord}}' model:value="{{pwd_val}}" placeholder="请输入密码(6-20位)" maxlength="20" class="form-input" />
      </view>
        // 判断当前点击图标后是显示还是隐藏密码
        <image src='{{defaultType ? "../../../images/nosee.png" : "../../../images/see.png"}}' class="nosee-img" bindtap="onShowPad"></image>
   </view>
</form>
// js
data:{
   defaultType: true, // 默认不显示密码
    passWord: 'true', // 默认为密码是password类型
    userName: '',
    pwd_val: '',
}  

// 是否显示密码
  onShowPad:function(){
    this.data.defaultType= !this.data.defaultType;
    this.data.passWord = !this.data.passWord;
    this.setData({
      defaultType: this.data.defaultType,
      passWord: this.data.passWord
    })
  }
上一篇 下一篇

猜你喜欢

热点阅读