ionic 密码显示与隐藏

最新推荐文章于 2021-10-29 09:07:25 发布

Michael-杨楠

最新推荐文章于 2021-10-29 09:07:25 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.youkuaiyun.com/tgbyn/article/details/80645099

版权

本文介绍如何在Ionic项目中实现密码输入框的显示与隐藏功能，通过一个可点击的眼睛图标控制密码明文与密文状态的切换。在HTML中添加密码输入框和眼睛图标，并在SCSS中进行样式设置。该功能适用于增强用户界面的友好性和安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

最近做一个项目，参考别人博客写了一个眼睛的关闭与显示

内容：

HTML中：

     <ion-item>
       <ion-icon item-start iso="ios-key" md="md-key"></ion-icon>
       <ion-input type="{
  {pwshow?'text':'password'}}" [(ngModel)]='userinfo.password' placeholder='请输入密码'></ion-input>
       <a href="javascript:;"rel="external nofollow" item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?'eyeshow':'eyehide'">
          <!-- javascript: 是一个伪协议，其他的伪协议还有 mail: tel: file: 等等。 -->
          <!-- javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。 -->
          <!-- rel="external nofollow"这个链接非本站链接，不要爬取也不要传递权重 -->
          <!-- ngClass:第一个参数为类名称，第二个参数为boolea

最低0.47元/天解锁文章