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; ...
- [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个超链接,需要点击一个链 ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- jquery实现密码框显示提示文字
jquery实现密码框提示文字的功能. 代码: <html> <head> 3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
随机推荐
- Fedora 22中的DNF软件包管理工具
Introduction DNF is the The Fedora Project package manager that is able to query for information abo ...
- PagerSlidingTabStrip介绍及使用,让ViewPager更绚丽
转载请注明出处http://blog.csdn.net/harryweasley/article/details/42290595,谢谢. 以前一直想着,ViewPager中间的那个横线怎么跟着屏幕的 ...
- DirectX SDK
http://blog.csdn.net/c4501srsy/article/details/17403927 http://blog.csdn.net/yy649487394/article/det ...
- Sunny-Code Beta版总结会议
时间:2015-6-12 地点:基教601 参会人员:Sunny-Code全体成员 设想和目标 我们的软件要解决什么问题?是否定义得很清楚? 我们打算做一款集成小蝴蝶功能.Ip快速修改功能.WiFi共 ...
- XMLHttpRequest
XMLHttpRequest对象的方法 abort() 取消当前所发出的请求 getAllResponseHeaders() 取得所有的HTTP头信息 getResponseHeader() 取得一个 ...
- 练习1-12:编写一个程序,以每行一个单词的形式打印其输入(C程序设计语言 第2版)
#include <stdio.h> #define NOT_BLANK 1 #define BLANK 0 main() { int c; int last_ch = NOT_BLANK ...
- IOS开发之音频--录音
前言:本篇介绍录音. 关于录音,这里提供更为详细的讲解网址:http://www.cnblogs.com/kenshincui/p/4186022.html#audioRecord ,并且该博客有更 ...
- 在类库中引用WebService的注意事件
在VS中 添加引用服务之后 会在 类库中生成一个app.config的文件 把里面的配置节点 添加到web项目中的 web.config中 即可.不然会报 错误
- JavaScript 全局
JavaScript 全局 JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示 ...
- UVa 10943 (数学 递推) How do you add?
将K个不超过N的非负整数加起来,使它们的和为N,一共有多少种方法. 设d(i, j)表示j个不超过i的非负整数之和为i的方法数. d(i, j) = sum{ d(k, j-1) | 0 ≤ k ≤ ...