PWA - Angular: создание собственной цифровой клавиатуры для выбора PIN-кода - PullRequest
Новая
       48

PWA - Angular: создание собственной цифровой клавиатуры для выбора PIN-кода

0 голосов
/ 25 февраля 2020

Это мой первый раз с приложением PWA. Много нового, чему можно научиться.

Мне нужно реализовать свой собственный цифровой блок для ввода PIN-кода. Я подготовил пример страницы:

enter image description here

Так что я думаю, как это реализовать. В настоящее время я использую таблицу html для создания цифровой клавиатуры, но есть несколько вещей, которые я не знаю, как правильно реализовать.

Например, я хочу изменить каждое "____" на число, на которое нажали это будет скрыто сразу (* как в типе пароля). Пользователь не может выбирать поля «___», они только для отображения значений -> прикосновение к цифровой клавиатуре добавляет выбранный номер к следующему пустому полю (максимальная длина = 4), и пользователь может сохранять изменения, когда все поля заполнены, или может удалить последний выбранный номер. коснувшись «удалить поле». Я считаю, что это типичное поведение всех устройств.

Для всех, кто может мне помочь, я создал пример numpad (без стилей). Вы можете изменить это или дать мне несколько советов, как это реализовать, и я постараюсь сделать это самостоятельно: https://stackblitz.com/edit/angular-nfhnr2

Спасибо!

1 Ответ

3 голосов
/ 25 февраля 2020

Вот мой стартовый код. app.component.ts 

import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  position: number;
  @ViewChild("first", { static: true }) first: ElementRef;
  @ViewChild("second", { static: true }) second: ElementRef;
  @ViewChild("third", { static: true }) third: ElementRef;
  @ViewChild("fourth", { static: true }) fourth: ElementRef;
  ngOnInit() {
    this.position = 1;
  }
  enter(n: number) {
    if (this.position < 5) {
      if (this.position === 1) {
        this.first.nativeElement.value = n;
      }
      if (this.position === 2) {
        this.second.nativeElement.value = n;
      }
      if (this.position === 3) {
        this.third.nativeElement.value = n;
      }
      if (this.position === 4) {
        this.fourth.nativeElement.value = n;
      }
      this.position++;
      console.log(
          "position is " +
          this.position +
           " " +
         "PIN is " +
        this.first.nativeElement.value +
          this.second.nativeElement.value +
          this.third.nativeElement.value +
          this.fourth.nativeElement.value
      );
    }
  }
  back() {
    if (this.position > 1) {
      this.position--;
      if (this.position === 1) {
        this.first.nativeElement.value = "";
      }
      if (this.position === 2) {
        this.second.nativeElement.value = "";
      }
      if (this.position === 3) {
        this.third.nativeElement.value = "";
      }
      if (this.position === 4) {
        this.fourth.nativeElement.value = "";
      }
      console.log(
         "position is " +
          this.position +
          " " +
          "PIN is " +
        this.first.nativeElement.value +
          this.second.nativeElement.value +
          this.third.nativeElement.value +
          this.fourth.nativeElement.value
      );
    }
  }
}

и app.component. html

<div class="d-flex">
  TYPE PIN:
  <div>
    <table>
      <tr>
        <td><input type="password" #first maxlength="1" required readonly placeholder="_" size="1"></td>
        <td><input type="password" #second maxlength="1" required readonly placeholder="_" size="1"></td>
        <td><input type="password" #third maxlength="1" required readonly placeholder="_" size="1"></td>
        <td><input type="password" #fourth maxlength="1" required readonly placeholder="_" size="1"></td>
      </tr>
    </table>
  </div>
  <div>
    <table>
      <tr>
        <td (click)="enter(1)">1</td>
        <td (click)="enter(2)">2</td>
        <td (click)="enter(3)">3</td>
      </tr>
      <tr>
        <td (click)="enter(4)">4</td>
        <td (click)="enter(5)">5</td>
        <td (click)="enter(6)">6</td>
      </tr>
      <tr>
        <td (click)="enter(7)">7</td>
        <td (click)="enter(8)">8</td>
        <td (click)="enter(9)">9</td>
      </tr>
      <tr>
        <td></td>
        <td (click)="enter(0)">0</td>
        <td><button (click)="back()">BACKSPACE</button></td>
      </tr>
    </table>
  </div>
  <div>
    <button>SAVE</button>
  </div>
</div>

Редактировать: выглядит лучше, если добавить следующее к css 

    input {
  border: hidden;
  }

Вот мой StackBlitz

...