仅用于字母字符的输入掩码仅允许 1 个单词在 Angular 中使用 Primeng答案

【问题标题】：Input Mask for only alpha characters let 1 words only with Primeng in Angular仅用于字母字符的输入掩码仅允许 1 个单词在 Angular 中使用 Primeng
【发布时间】：2020-05-26 14:15:24
【问题描述】：

就像教程说的“a - Alpha character (defaut: A-Z,a-z)”没关系。

但是当我像下面这样应用mask="a" 时，它只让我输入 1 个单词，但我不想限制输入的大小。所以人们可以输入任何大小的单词。我怎样才能做到这一点？

我尝试使用 characterPattern="[А-Zа-z]" 或使用常规表达式（如 ^[A-Za-z]）提供普通的 html 模式属性，但没有奏效。提前致谢

<p-inputMask mask="a" [placeholder]="'gerekli' | translate" [(ngModel)]="User.adi"></p-inputMask>

【问题讨论】：

你好。你试过<p-inputMask mask="a*" [placeholder]="'gerekli' | translate" [(ngModel)]="User.adi"></p-inputMask>吗？
是的掩码属性将 * 用于字母数字字符。所以如果我使用它，我可以有 2 个字母和数字字符。所以它不像我预期的那样工作
这不是一个好方法，但 onkeypress="return (event.charCode > 64 && event.charCode 96 && event.charCode

标签： html angular primeng

【解决方案1】：

你可以实现以下，

在您的 component.ts 文件中，

setInputFilter(inputHTML, inputValue) {
    [
      "input",
      "keyup",
      "keydown",
      "mouseup",
      "mousedown",
      "select",
      "contextmenu",
      "drop"
    ].forEach(function(event) {
      inputHTML.addEventListener(event, function() {
        if (inputValue(this.value)) {
          this.previousValue = this.value;
          this.previousSelectionStart = this.selectionStart;
          this.previousSelectionEnd = this.selectionEnd;
        } else if (this.hasOwnProperty("previousValue")) {
          this.value = this.previousValue;
        }
      });
    });
  }

在AfterViewInit生命周期钩子中调用函数setInputFilter。

ngAfterViewInit() {

    this.setInputFilter(document.getElementById("inputText"), function (value) {

      return /^[a-zA-Z]*$/.test(value);

    })
  }

在您的 component.html 文件中，

<input id="inputText" pInputText [(ngModel)]="val"/>

我正在使用 PrimeNG 的 InputTextModule 而不是 InputMaskModule

【讨论】：