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

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

思路:根据手机是安卓还是苹果来设置不同的字体大小,可以通过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中调用了一次点击眼睛事件就可以了

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰冰-ying

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值