angularjs2.x 密码隐藏显示的实例

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

首先，输入框的类型判断；

<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.x 密码隐藏显示的实例相关推荐

1对1直播源码，登录注册密码隐藏显示
1对1直播源码,登录注册密码隐藏显示 //密码显示隐藏case R.id.w2:if (isEye) {login_pwd.setTransformationMethod(HideReturnsTra ...
密码隐藏/显示的简单实现
先上效果图吧: 实现原理: 原理很简单,就是通过对显示密码单选框选中状态的判断,使用Jquery(或者JS)动态改变密码输入框的type为password或者text.具体的其他样式可以再添加,但是代 ...
密码的显示与隐藏php,el-input 标签中密码的显示和隐藏功能的实例代码
效果展示: 密码隐藏: 密码显示: 代码展示: 一:标签代码二: var app = new Vue({ el:"#app", data:{ users:[], total:10 ...
有赞组件vant密码输入框input在微信小程序里隐藏显示密码有问题
<van-fieldvalue="{{ pwd}}"placeholder="请输入密码"border="{{ false }}"cl ...
html密码框输入内容隐藏,密码框显示提示文字的功能实现
在密码输入框内显示提示的文字,引导用户操作,实现的效果如下图显示. 未输入密码前: 输入密码后: 由于js无法直接控制input文本框中的type属性,因此无法通过js控制input文本框在密码框和普 ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
flutter显示图标_flutter中密码输入如何切换隐藏/显示？
可以通过TextFormField的obscureText属性控制密码输入的隐藏/显示,示例代码如下:@override void initState() { passwordVisible = fa ...
微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
如何实现密码的显示和隐藏？
如图所示,我们在登录账号的时候经常会看到密码的显示和隐藏是可以进行切换的,那么到底怎么实现这个功能呢? 其实原理很简单: 通过点击事件将密码输入框的属性"password"改为&q ...

angularjs2.x 密码隐藏显示的实例

angularjs2.x 密码隐藏显示的实例相关推荐

最新文章

热门文章