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

Question

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

login.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>

login.scss

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

login.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上的错误。

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

---

无论如何，请查看 this working Stackblitz project 以执行以下操作：

代码实际上很简单-想法是使用带有图标的按钮，而不是仅使用图标，以免发生tap事件：

组件

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

将导致：