Кнопка Показать / Скрыть пароль не работает, когда вход активен в Ionic 3 - PullRequest
Новая
       37

Кнопка Показать / Скрыть пароль не работает, когда вход активен в Ionic 3

4 голосов
/ 27 июня 2019

Я пытаюсь реализовать кнопку показа / скрытия для поля пароля в Ionic 3. Я получил справку по коду от здесь

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 и сделал иконку абсолютной, чтобы она появлялась сверху поля ввода, а не сбоку. Этот щелчок по значку работает, когда поле ввода не активно / не выбрано, но если я в процессе ввода в поле ввода, щелчок не работает / не распознается. Пожалуйста, помогите.

С предложенным решением мое поле выглядит следующим образом. enter image description here

1 Ответ

2 голосов
/ 18 июля 2019

Я не совсем уверен в том, что

... и сделал иконку абсолютной, чтобы она появлялась сверху поля ввода вместо стороны

будет означать, но, тем не менее, использование position: absolute поверх входов может привести к ошибкам, особенно в iOS.

Другая возможная проблема вашего кода заключается в том, что кнопки предназначены для решения проблем, связанных с нажатиями на мобильных устройствах, но значки иногда могут работать неправильно.

В любом случае, пожалуйста, посмотритев этот рабочий проект Stackblitz сделать что-то вроде этого:

enter image description here

Код довольно прост на самом деле- идея состоит в том, чтобы использовать кнопку со значком вместо просто значка, чтобы избежать проблем с событием касания:

Компонент 

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

приведет к:

enter image description here

...