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 相关文章推荐
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
php 缓存函数代码
2008/08/27 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP的PSR规范中文版
2013/09/28 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
使用p5.js临摹动态图片
2019/11/04 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
python进阶教程之动态类型详解
2014/08/30 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python实现画出e指数函数的图像
2019/11/21 Python
python自定义函数def的应用详解
2020/06/03 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
物业总经理岗位职责
2014/02/28 职场文书
食品安全处置方案
2014/06/14 职场文书
2014年司机工作总结
2014/11/21 职场文书
灵山大佛导游词
2015/02/04 职场文书