angularjs2 ng2 密码隐藏显示的实例代码
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;
}
下面附上效果图啦哈哈。。
初始状态效果图
打开眼睛之后效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue隐藏显示、只读实例代码，包括了Vue隐藏显示、只读实例代码的使用技巧和注意事项，需要的朋友参考一下 1.Vue隐藏显示 •v-bind:class=”{hidden: isHidden }” 可动态设置vm.isHidden值 •:class=”{hidden: isHidden }” 简写 2.Vue控件只读 •v-bind:readonly=”isReadOnly” 可动态
-
本文向大家介绍JQuery显示隐藏DIV的方法及代码实例，包括了JQuery显示隐藏DIV的方法及代码实例的使用技巧和注意事项，需要的朋友参考一下 1. 如果在载入是隐藏： 2. 动态隐藏和显示： 以上代码之前，可能还要加上这句话： 使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。 $("#id").show()表示display:block, $(
-
本文向大家介绍jquery显示隐藏元素的实现代码，包括了jquery显示隐藏元素的实现代码的使用技巧和注意事项，需要的朋友参考一下 或 它是个集合肯定没有display属性 $("#firstStep").hide(500);而且可以设置时间；("#firstStep").hide(500);而且可以设置时间； $(".class").css('display','block'); $("#id
-
本文向大家介绍Android中实现EditText密码显示隐藏的方法，包括了Android中实现EditText密码显示隐藏的方法的使用技巧和注意事项，需要的朋友参考一下 在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout，先看下效果图： 只要在布局中添加属性app:passwordToggleEnabled=”true”就可以实现当E
-
本文向大家介绍vue实现密码显示隐藏切换功能，包括了vue实现密码显示隐藏切换功能的使用技巧和注意事项，需要的朋友参考一下 先给大家分享效果图： 具体实现代码如下所示： html： script： 注：带小眼睛的睁开闭合。 总结 以上所述是小编给大家介绍的vue实现密码显示隐藏切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
问题内容： 因此，我一直在研究密码强度检查器，它的工作方式是用户在文本字段中输入一些随机文本，然后显示即时的视觉反馈（击穿点）。我还添加了一个复选框，选中该复选框时应隐藏密码，即用星号替换所有字符，同时保留用户输入的实际文本。文档侦听器用于跟踪文本字段内的更改。（入场的每个字符都会被分析，然后评分） 因此，我的问题是，如何准确地用星号掩盖用户输入并保留其原始值？ GUI如下所示： http://s