Show/Hide 在 Ionic 3 中输入处于活动状态时，密码按钮不起作用

Question

我正在尝试为 Ionic 3 中的密码字段实现 show/hide 按钮。我从

获得了代码帮助

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 文件中做了一个修改，使图标成为绝对图标，以便它出现在输入字段的顶部而不是侧面。当输入字段不是 active/selected 时，此图标点击有效，但如果我正在输入字段中输入，则点击不是 working/recognized。请帮忙。

解决方案建议我的字段看起来像这样。

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

会导致：

Show/Hide 在 Ionic 3 中输入处于活动状态时，密码按钮不起作用

Show/Hide password button not working when input is active in Ionic 3

passwords

sass

show-hide

ionic-framework

ionic3