ionic-framework - 当 Ionic 3 中的输入处于事件状态时，显示/隐藏密码按钮不起作用

Question

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

登录.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

我不完全确定是什么

... and made the icon absolute so that it appears on top of the input field instead of the side

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

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

不管怎样，请看 this working Stackblitz project 做这样的事情:



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

组件

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

会导致: