当 Ionic 3 中的输入处于活动状态时，显示/隐藏密码按钮不起作用

Question

我正在尝试为 Ionic 3 中的密码字段实现显示/隐藏按钮。我从这里得到了代码帮助

登录.html

  <ion-item>
    <ion-input [type]="passwordType" placeholder="Password" formControlName="password"></ion-input>
    <ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
  </ion-item>

登录.scss

    .passwordIcon{
        font-size: 1.3em;
        position: absolute;
        right: .1em;
        top: .5em;
        z-index: 2;
     }

登录.ts

passwordType: string = 'password';
passwordIcon: string = 'eye-off';
  hideShowPassword() {
    this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
    this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
}

我在 .scss 文件中做了一个修改，并将图标设为绝对，以便它出现在输入字段的顶部而不是侧面。当输入字段未处于活动/选择状态时，此图标单击有效，但如果我正在输入字段中键入，则单击无效/无法识别。请帮忙。

解决方案建议我的领域看起来像这样。

Answer 1

我不完全确定是什么

...并使图标绝对化，使其出现在输入字段的顶部而不是侧面

这意味着，但是，position: absolute在输入之上使用可能会导致特别是在 iOS 上的错误。

您的代码的另一个可能问题是按钮旨在处理与移动设备中的点击相关的问题，但有时图标可能无法正常工作。

无论如何，请看一下这个有效的 Stackblitz 项目来做这样的事情：

代码实际上非常简单 - 想法是使用带有图标的按钮而不是仅使用图标来避免点击事件的问题：

成分

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public showPassword: boolean = false;

  constructor(public navCtrl: NavController) {}

  public onPasswordToggle(): void {
    this.showPassword = !this.showPassword;
  }

}

模板

<ion-header>
  <!-- ... -->
</ion-header>

<ion-content padding>
  <!-- ... -->

  <ion-item>
    <ion-input placeholder="Password" [type]="showPassword ? 'text' : 'password'" clearOnEdit="false"></ion-input>
    <button (click)="onPasswordToggle()" ion-button clear small item-end icon-only>
      <ion-icon [name]="showPassword ? 'eye-off' : 'eye'"></ion-icon>
    </button>
  </ion-item>
</ion-content>

编辑

根据您的评论，将按钮保持在边框内的一种方法不是将边框应用于input，而是应用于ion-item.

例如这样的事情：

ion-item {
  border: 1px solid #ccc;
  border-radius: 10px;
}

会导致：