angularjs2 ng2 密码隐藏显示
代码结合ionic2开发移动端项目,注册页的密码的input一般用password,
但是用户输入密码时可能会输入错误,需要显示成text。
如图:
首先,输入框的类型判断;
<ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input>
然后,添加眼睛的点击事件,ngClass判断图标样式;
<a href="javascript:;"item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?'eyeshow':'eyehide'">
<ion-icon name="ios-eye-off" color="dark" class="eye-hide"></ion-icon> <!--闭眼图标-->
<ion-icon name="ios-eye" color="dark" class="eye-show"></ion-icon> <!--睁眼图标-->
</a>
最后,附上ngClass的样式,图标的隐藏显示。
.eyehide .eye-hide, .eyeshow .eye-show{
display: block;
}
.eyehidee .eye-show, .eyeshow .eye-hide{
display: none;
}
下面附上效果图啦哈哈。。
初始状态效果图
打开眼睛之后效果图
angularjs2 ng2 密码隐藏显示的更多相关文章
- js控制密码的显示与隐藏实例
原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...
- Android文本输入框(EditText)切换密码的显示与隐藏
package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...
- IOS swift实现密码的显示与隐藏切换
最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...
- el-input 标签中密码的显示和隐藏
效果展示: 密码隐藏: 密码显示: 代码展示: 一:<el-input>标签代码 <el-form-item label="密码" prop="pass ...
- JS实现登录页密码的显示和隐藏功能
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...
- [Android] 怎么在应用中实现密码隐藏?
[Android] 怎么在应用中实现密码隐藏? 在安卓应用中,用户注册或者登录时,需要把密码隐藏,实现一定的保密效果.在安卓中,可以通过设置EditText组件的TransformationMetho ...
- JQuery中隐藏/显示事件函数
1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...
- [转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
随机推荐
- 解决Ubuntu开关机动画不正常方法
联想的笔记本,显卡NVIDIA GT218M,默认使用开源的驱动,但挂起后,再唤醒就黑屏回不到桌面. 1.解决办法:安装NVIDIA专有驱动 $sudo apt-get install nvidia- ...
- head first python helloword
如何使用python 打出hello word 在python shell 键入print 'hello word'( python 2) or print ("hello word&qu ...
- MongoDB--架构搭建(主从、副本集)之主从
此章节讲述主从架构 主从架构 -- 目前已经不建议使用,推荐使用复制集 主从配置可以在配置文件中配置 从节点可以在启动之后使用命令追加主节点,db.source.insert({"host ...
- css实现选项卡
<style> *{ margin: ; padding: ; text-decoration: none; list-style: none; outline:none; } .box{ ...
- MVC之前-ASP.NET初始化流程分析1
Asp.net Mvc是当前使用比较多的web框架,也是比较先进的框架.我打算根据自己的实际项目经验以及相关的源码和一些使用Asp.net Mvc的优秀项目(主要是orchard)来说一说自己对于As ...
- for循环操作数组
if(!empty($data)){ $arr_length=count($data); //数组的步长 $array_keys_list=array_values($data); //数组的键值 f ...
- zookeeper client API实现(python kazoo 的实现)
这里主要分析zookeeper client API的实现方式,以python kazoo的实现代码为蓝本进行逻辑分析. 一.代码框架及介绍 API分为同步模式和异步模式.同步模式是在异步模式的基础上 ...
- 【LeetCode】206. Reverse Linked List
题目: Reverse a singly linked list. 提示: 此题不难,可以用迭代或者递归两种方法求解.记得要把原来的链表头的next置为NULL: 代码: 迭代: /** * Defi ...
- mongodb远程连接配置
mongodb远程连接配置如下: 1.修改配置文件mongodb.conf 命令:vim /etc/mongodb.conf 把 bind_ip=127.0.0.1 这一行注释掉或者是修改成 bind ...
- 初试spring-session
一.简介 spring-session提供了用户会话信息管理的API和实现. 它将取代容器中的HttpSession.在没有容器会话集群方案的情况下,使得支持会话集群微不足道. 它支持在一个浏览器实例 ...