微信小程序安卓密码加密的小黑点太大

最近在写一个小程序，身份证和密码需要用小眼睛来控制加密与展示，但是安卓手机的加码黑点太大，输入身份证太长，输入框长度不够，也查了官方资料，没有找到，就自己简略的想了一个比较笨的办法，如果大家有更好的方法，可以分享一下。

思路：根据手机是安卓还是苹果来设置不同的字体大小，可以通过placeholder-style='font-size:32rpx'来设置提示信息的字体大小

    <view class="weui-cell weui-cell_active">
        <view class="weui-cell__hd"><label class="weui-label">身份证号</label></view>
        <view class="weui-cell__bd">
        <!-- value="{
   
   {idCard}}" -->
        <input class="weui-input" type="idcard" password="{
   
   {!showIdCard}}" wx:if="{
   
   {platform=='android'}}" placeholder="请填写身份证号" value="{
   
   {idCard}}" data-attr='idCard' bindinput="handleInput" placeholder-class="weui-input__placeholder" placeholder-style='font-size:32rpx' style="font-size: {
   
   {fSizeId}}rpx;font-family: Arial, Helvetica, sans-serif;" />
        <input class="weui-input" type="idcard" password="{
   
   {!showIdCard}}" wx:else placeholder="请填写身份证号" value="{
   
   {idCard}}" data-attr='idCard' bindinput="handleInput" placeholder-class="weui-input__placeholder" />
        </view>
        <view class="weui-cell__ft">
            <button style="width: auto;" class="weui-btn_reset weui-btn_icon" catchtap="handelShowIdCard">
                <image src="{
   
   {!showIdCard?'/pages/images/close.png':'/pages/images/open.png'}}" mode="" style="width: 36rpx;height: 36rpx;" />
            </button>
        </view>
    </view>

这是wxml，可以根据是否是安卓来控制字体大小，通过wx.getSystemInfo()来获取手机信息

在登录页面的onload中获取手机信息

在js中设置data

   data: {
        idCard:'',
        showIdCard:false,
        platform:'',
        fSizeId:20
    },

 handelShowIdCard(){
        this.setData({
            showIdCard:!this.data.showIdCard,//控制是否加密
        })
        if(this.data.platform=='android' && this.data.showIdCard){//控制字体大小
          this.setData({
            fSizeId:32
          })
        }else if(this.data.platform=='android' && !this.data.showIdCard){
          this.setData({
            fSizeId:20
          })
        }
    },

最后，我在设置input的type为idcard时遇到了一个很奇怪的问题，就是在苹果手机上，刚进去输入内容是不加密的，但是在安卓又是好的，初始是加密的，在苹果上需要点击一次才会加密，所以我就自动调用了点击眼睛的事件，将

之后再onload中调用了一次点击眼睛事件就可以了

扫描二维码关注公众号，回复： 15802321 查看本文章

微信小程序安卓密码加密的小黑点太大

猜你喜欢