最近在写一个小程序,身份证和密码需要用小眼睛来控制加密与展示,但是安卓手机的加码黑点太大,输入身份证太长,输入框长度不够,也查了官方资料,没有找到,就自己简略的想了一个比较笨的办法,如果大家有更好的方法,可以分享一下。
思路:根据手机是安卓还是苹果来设置不同的字体大小,可以通过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中调用了一次点击眼睛事件就可以了