微信小程序如何实现密码显示与隐藏的睁眼闭眼功能
这篇“微信小程序如何实现密码显示与隐藏的睁眼闭眼功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序如何实现密码显示与隐藏的睁眼闭眼功能”文章吧。
默认密码隐藏起来(显示为点),后面的图标是闭眼;用户点击图标后,图标变成睁眼,同时把密码明文显示出来;如此循环
最初实现方案
js:
Page({
/**
* 页面的初始数据
*/
data: {
// 密码框type值
inputType:"password",
// 是否显示密码
show_pass:false,
...
}
...
})
wxml:
<text class="page-flex-password">设置密码</text>
<view class="page-flex-row3">
<input name="password" class="page-input2" placeholder-class="place-holder" placeholder="请输入您要设置的密码(6-12位)" type="{{inputType}}"></input>
<image class="password-icon" src="/images/register/yj_01.png" bindtap="seeTap" wx:if="{{show_pass}}"/>
<image class="password1-icon" src="/images/register/biyan.png" bindtap="seeTap" wx:else/>
</view>
用户点击图标时:
seeTap:function(){
var newType = this.data.inputType=='password'?'text':'password';
this.setData({
// 切换图标
show_pass:!that.data.show_pass,
// 切换表单type属性
inputType:newType,
})
},
这样的代码在微信开发者工具测试是没问题的。
当上传作为体验版,在手机上测试时发现问题:
1、安卓手机点一轮后失效了(点一次密码可见,再点一次密码不可见,再点只是图标在切换,密码一直是不可见)
2、苹果手机第一次点击还会把密码框上的内容清空了
===最终网上找到解决方法,就是不用type属性,改用password属性
Page({
/**
* 页面的初始数据
*/
data: {
//是否密码框
passwordType:true,
// 是否显示密码
show_pass:false,
...
}
...
})
<text class="page-flex-password">设置密码</text>
<view class="page-flex-row3">
<input name="password" class="page-input2" placeholder-class="place-holder" placeholder="请输入您要设置的密码(6-12位)" password='{{passwordType}}'></input>
<image class="password-icon" src="/images/register/yj_01.png" bindtap="seeTap" wx:if="{{show_pass}}"/>
<image class="password1-icon" src="/images/register/biyan.png" bindtap="seeTap" wx:else/>
</view>
seeTap:function(){
that.setData({
// 切换图标
show_pass:!that.data.show_pass,
// 切换是否密码框
passwordType:!that.data.passwordType,
})
},
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码