Текстовое поле проверки в мобильном браузере не работает - PullRequest
Новая
       84

Текстовое поле проверки в мобильном браузере не работает

0 голосов
/ 18 июня 2020
  • Проверка текстового поля в мобильном браузере не работает для моего Angular приложения
  • Мобильный браузер: Chrome, браузер Samsung (не работает в обоих браузерах)
  • Ожидается от 0 до 9 и Только от A до Z в текстовом поле

Я использовал:

1. Сначала Я попытался проверить его с помощью charCode ключа, для браузера портативного компьютера он работал, но для мобильного браузера он не работал.

код символа браузера телефона был 229 для каждой клавиши, поэтому он не работал

Код

HTML

<input (keypress)="numberOnly($event)" type="text" />

TS 

numberOnly(event): boolean {
    const charCode = event.which ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;
  }

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

Директива код: 

import { Directive, HostListener, ElementRef, Input } from '@angular/core';
@Directive({
  selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

  regexStr = '^[a-zA-Z0-9_]*$';
  @Input() isAlphaNumeric: boolean;

  constructor(private el: ElementRef) { }


  @HostListener('keypress', ['$event']) onKeyPress(event) {
    return new RegExp(this.regexStr).test(event.key);
  }

  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
    this.validateFields(event);
  }

  validateFields(event) {
    setTimeout(() => {

      this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, '');
      event.preventDefault();

    }, 100)
  }

}

3. третий Я использовал шаблон, , но опять же он не работал в мобильном браузере , в браузере ноутбука он работал

Шаблон, который я использовал: / [AZ] {5} \ d {4} [AZ] {1} / i Я создал реактивную форму, а затем проверил ее с помощью Validator.pattern 

username: ['', Validators.pattern('/[A-Z]{5}\d{4}[A-Z]{1}/i')],})

HTML 

<input  formcontrolname='username' (keypress)="numberOnly($event)" type="text" />

Игровая площадка: https://codesandbox.io/embed/dazzling-hellman-pygp1?file= / src / app / app.component. html: 64-119 & codemirror = 1

...