angularjs2 ng2 密码隐藏显示的实例代码


Posted in Javascript onAugust 01, 2017

angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text。

如图:

angularjs2 ng2 密码隐藏显示的实例代码

首先,输入框的类型判断;

<ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input>

然后,添加眼睛的点击事件,ngClass判断图标样式;

<a href="javascript:;" rel="external nofollow" 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 密码隐藏显示的实例代码

打开眼睛之后效果图

angularjs2 ng2 密码隐藏显示的实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
AngularJS Module方法详解
Dec 08 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
使用JavaScript进行表单校验功能
Aug 01 #Javascript
SpringMVC简单整合Angular2的示例
Jul 31 #Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 #Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 #Javascript
knockoutjs模板实现树形结构列表
Jul 31 #Javascript
本地存储localStorage用法详解
Jul 31 #Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 #Javascript
You might like
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
决策树的python实现方法
2014/11/18 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
破解安装Pycharm的方法
2018/10/19 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
行政办公室岗位职责
2014/03/18 职场文书
企业承诺书怎么写
2014/05/24 职场文书
国庆横幅标语
2014/10/08 职场文书
融资合作协议书范本
2014/10/17 职场文书
golang中的空slice案例
2021/04/27 Golang
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Android 中的类文件和类加载器详情
2022/06/05 Java/Android