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

原创 2018年04月16日 09:50:03

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;
}

    效果图

       



  

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuehu837769474/article/details/79956610

angularjs中$resource的使用

一、使用$resource    1、引入 angular-resource.min.js     2、定义模块时加载 ngResource       var app = angular.modul...
  • lzyisaking
  • lzyisaking
  • 2016-02-18 11:16:49
  • 2005

密码框的明密文(显示和隐藏) 显示

最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换. ...
  • qq_33072593
  • qq_33072593
  • 2016-12-19 21:35:09
  • 10917

js简单实现密码的显示与隐藏

使用js实现单击按钮时显示密码,再次单击时隐藏密码的循环切换功能。 源码: 1.通过getElementById获取到输入框的type和按钮。当按钮添加一个onclick事件,改变输入框的ty...
  • neverST
  • neverST
  • 2016-09-19 09:57:05
  • 1579

html密码框的显示与隐藏

test var isShow=true; function change(){ var v=document...
  • u012424449
  • u012424449
  • 2016-12-29 17:00:12
  • 4274

Android实现密码隐藏显示

Android实现密码隐藏显示需求:当用户点击提现按钮的时候,弹出输入支付密码的popupwindow,输入密码框后面有显示和隐藏支付密码的切换按钮。老规矩先验货:1.布局文件 ...
  • xinpengfei521
  • xinpengfei521
  • 2017-11-11 21:34:39
  • 1036

EditText动态管理密码显示与隐藏,明文与星号

这次的功能比较简单,所以就直奔主题吧
  • qq_34471736
  • qq_34471736
  • 2017-03-28 15:43:33
  • 2154

注册界面密码的动态显示和隐藏

注册界面,或者其他需要密码输入的界面,可以对EditText进行动态的设置显示或者是隐藏...
  • zzhjiang
  • zzhjiang
  • 2016-03-18 11:58:04
  • 294

Android EditText密码显示隐藏和全部属性的介绍

这个很简单,一起来看看图和代码吧:    代码如下:    布局文件: ...
  • shenggaofei
  • shenggaofei
  • 2016-08-20 17:06:04
  • 13687

Android实现动态显示或隐藏密码输入框的内容

本文实例展示了Android实现动态显示或隐藏密码输入框内容的方法,分享给大家供大家参考之用。具体方法如下:该功能可通过设置EditText的setTransformationMethod()方法来实...
  • aust_glj
  • aust_glj
  • 2016-03-22 22:02:15
  • 1435

Qt自定义密码框,先显示后隐藏

现在很多应用在密码输入时,会先显示一段时间,大概几百毫秒,然后再变成星号或者圆点隐藏起来。这样做的好处是,可以让密码输入者看到自己输入的字符,同时又防止密码被偷窥。但是Qt自带的密码输入框,要么输入时...
  • caoshangpa
  • caoshangpa
  • 2016-03-25 11:31:00
  • 5158
收藏助手
不良信息举报
您举报文章:angularjs2.x 密码隐藏显示的实例
举报原因:
原因补充:

(最多只允许输入30个字)