小程序密码显示与隐藏的实现

默认密码隐藏起来(显示为点),后面的图标是闭眼;用户点击图标后,图标变成睁眼,同时把密码明文显示出来;如此循环

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/xianshi.png" bindtap="seeTap" wx:if="{{show_pass}}"/><image class="password1-icon" src="../../images/register/yincnang.png" bindtap="seeTap" wx:else/></view>

用户点击图标时:

seeTap:function(){var that = thisthat.setData({show_pass:!that.data.show_pass, // 切换图标passwordType:!passwordType, // 切换是否密码框})},

参考:
小程序实现密码交替显示隐藏的效果
在微信小程序里,实现点击框里的眼睛图标时密码显示与隐藏切换

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60790.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

镜之Json Compare Diff

前言 “镜” 寓意是凡事都有两面性,Json 对比也不例外! 因公司业务功能当中有一个履历的功能,它有多个版本的 JSON 数据需要对比出每个版本的不同差异节点并且将差异放置在一个新的 JSON 当中原有结构不能变动,差异节点使用数组对象的形式存储,前端点击标红即可显示多个版本的节…

Ubuntu20.04如何更换国内源-阿里云源

1.备份源文件 cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.打开源文件&#xff0c;注释默认的源 vim /etc/apt/sources.list ## 注释原本内容 # deb http://mirrors.ivolces.com/ubuntu/ focal main restricted universe multiverse # deb-src http://mirrors.ivolc…

pandas由入门到精通-数据清洗-分类数据

pandas-02-数据清洗&预处理 E. 分类数据1. 适用情况2. Categorical 扩展数据类型2.1 通过astype将一个Series转化为Categorical类2.2 通过pd.Categorical 生成Categorical类2.3 通过pd.Categorical.from_codes 将标签列表和整数列表转化为Categorical类2.4 Categorical类的…

Django(7)-项目实战-发布会管理

登录功能 模板页面 sign/templates/index.html <!DOCTYPE html> <html> <head><title>Login Page</title> </head> <body><h1>发布会管理</h1><form action"/login/" method"post"><la…

linux————ELK(日志收集系统集群)

目录 一、为什么要使用ELK 二、ELK作用 二、组件 一、elasticsearch 特点 二、logstash 工作过程 INPUT&#xff08;输入&#xff09; FILETER(过滤) OUTPUTS&#xff08;输出&#xff09; 三、kibana 三、架构类型 ELK ELKK ELFK ELFKK EFK 四、构建ELk集群…

Android基于JNI的Java与C++互调

java调用C++: #include <jni.h> //导出c函数格式 extern "C" JNIEXPORT //供JNI调用 JNICALL 函数名格式 Java_包名_类名_函数名(包名.替换为_) Java_com_example_getapplist_MainActivity_stringFromJNI 包名:com_example_getapplist 类名:MainActi…

异常的捕获和处理

目录 一、异常 1.异常概述 1.1认识异常 1.2Java异常体系结构 2.Java异常处理机制 2.1异常处理 2.2捕获异常 2.2.1使用try-catch捕获异常 2.2.2使用try-catch-finally处理异常 2.2.3使用多重catch处理异常 2.3抛出异常 2.3.1使用throws声明抛出异常 2.3.2使用throw…

管理类联考——逻辑——形式逻辑——汇总篇——知识点突破——形式逻辑——选言假言——要么、或者与箭头的关系

角度 或则转化/鲁滨逊定律 (1)或者变箭头: P ∨ Q = ┐ P → Q = ┐ Q → P P∨Q=┐P→Q=┐Q→P P∨

详细介绍typescript的所有变量类型

目录 1. 任意类型&#xff08;Any&#xff09;2. 数字类型&#xff08;Number&#xff09;3. 字符串类型&#xff08;String&#xff09;4. 布尔类型&#xff08;Boolean&#xff09;5. 数组类型&#xff08;Array&#xff09;6. 元组类型&#xff08;Tuple&#xff09;-需求明…

研磨设计模式day14模板方法模式

目录 场景 原有逻辑 有何问题 解决方案 解决思路 代码实现 重写示例 模板方法的优缺点 模板方法的本质 何时选用 场景 现在模拟一个场景&#xff0c;两个人要登录一个系统&#xff0c;一个是管理员一个是用户&#xff0c;这两个不同身份的登录是由后端对应的两个接…

Android笔记--Hilt

Hilt 是 Android 的依赖项注入库&#xff0c;可减少在项目中执行手动依赖项注入的样板代码。执行手动依赖项注入要求您手动构造每个类及其依赖项&#xff0c;并借助容器重复使用和管理依赖项。依赖注入的英文是Dependency Injection&#xff0c;简称DI,简单说一个类中使用的依赖…

Win11更新致蓝屏死机,应对技巧你必知!

Windows 11用户应该意识到&#xff0c;微软的最新更新导致一些电脑崩溃&#xff0c;并在可怕的死亡蓝屏上显示“UNSUPPORTED_PROCESSOR”。 这一点尤其值得注意&#xff0c;因为据报道&#xff0c;这种情况发生在自然情况下的Windows 11 PC上&#xff0c;因此对任何下载最新更…

数据结构day04(概念、顺序表)

今日任务 2.冒泡排序和选择排序 #define MAX 10typedef struct{int id; }data;typedef struct seq{data arr[MAX];int len; }seqList,*seqListP;/** function: 选择排序* param [ in] * param [out] * return */ int selectSort(seqListP p){if(is_empty(p))return 1;…

React Navigation 路由传参

页面之间传递参数 实现页面之间传递参数很简单&#xff0c;跟普通的 React 项目一样&#xff0c;具体实例入戏&#xff1a; // 传入参数 export default function Home(props: { navigation: any }) {return (<View><Text>Home</Text><Buttontitle"…

干翻Dubbo系列第十五篇:Rest协议基于SpringBoot的规范化开发

文章目录 文章说明 一&#xff1a;Rest协议简介 二&#xff1a;搭建开发环境 1&#xff1a;父项目里边引入的新的版本内容 2&#xff1a;Api中的操作 3&#xff1a;Provider模块 三&#xff1a;编码 1&#xff1a;API模块 2&#xff1a;Provider模块 3&#xff1a;Co…

学习总结(二) node.js服务器如何使用net模块向硬件发送命令与接收数据?

服务器server.js: const net require("net"); //此模块用于tcp/ip通讯 当收到get请求时: server.get("/cfjcApi/v1/SkyTempHudi", (req, res) > { let client new net.Socket(); client.connect(网络模块端口, 网络模块Ip, () > { //此模块…

leetcode做题笔记111. 二叉树的最小深度

给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 思路一&#xff1a;递归 int minDepth(struct TreeNode* root){if(!root)return 0;int leftminDepth(root->le…

在springboot中配置mybatis(mybatis-plus)mapper.xml扫描路径的问题

我曾经遇到过类似问题&#xff1a; mybatis-plus的mapper.xml在src/main/java路径下如何配置pom.xml和application.yml_idea 把mapper文件放到java下如何配置_梓沂的博客-CSDN博客 当时只是找到解决问题的办法&#xff0c;但对mybatis配置来龙去脉并未深入了解&#xff0c;所…

Servlet的使用(JavaEE初阶系列17)

目录 前言&#xff1a; 1.Servlet API的使用 1.1HttpServlet 1.2HttpServletRequest 1.3HttpServletResponse 2.表白墙的更新 2.1表白墙存在的问题 2.2前后端交互接口 2.3环境准备 2.4代码的编写 2.5数据的持久化 2.5.1引入JDBC依赖 2.5.2创建数据库 2.5.3编写数…

clickhouse系列3:clickhouse分析英国房产价格数据

1.准备数据集 该数据集包含有关英格兰和威尔士自1995年起到2023年的房地产价格的数据,超过2800万条记录,未压缩形式的数据集大小超过4GB,在ClickHouse中需要约306MB。 2.clickhouse中建表 CREATE TABLE uk_price_paid (price UInt32,