时间戳

首页 > 解决方案 > 用于字符串操作的 ng-Mask

javascript - 用于字符串操作的 ng-Mask

问题描述

我正在尝试转换/仅允许输入中的掩码定义值。可以说 - 大写。Mask code 'A' regEx : [A-Z]

<input type="text" class="form-control" mask="AAAA">

只期望 [AZ] 范围为 4 (ABCD) 的大写字符。 但是上述代码既没有转换为大写，也没有限制输入小写。任何建议将不胜感激。谢谢

标签： javascriptangularfrontendautoresizingmask

解决方案

如果您想限制用户输入并以大写形式显示字符，那么您可以创建一个指令来实现该行为。

例如 -

@Directive({
  selector: '[char-mask]'
})
export class CharDirective {
  @Input() upperCase = true;

  @HostBinding('class.upper')
  get upper() {
    return this.upperCase;
  }

  @HostListener('keydown', ['$event'])
  onKeydown(e) {
    if (!this.validateKeyCode(e.keyCode, e.target.value)) {
      e.preventDefault();
    }
  }

  private validateKeyCode(keyCode: number, value: string): boolean {
    var inp = String.fromCharCode(keyCode);
    if ((/[a-zA-Z]/.test(inp)) && (value.length <= 3)) {
      return true;
    }
    const whiteListedCodes = [8, 9, 13, 16, 37, 39];
    if (whiteListedCodes.indexOf(keyCode) > -1) {
      return true;
    }
  }

并在需要行为的输入上使用。

<input class="form-control" char-mask />

对于实施，您可以参考 - https://stackblitz.com/edit/angular-char-only-mask?file=src/app/char-mask.ts

我希望它会有所帮助。

推荐阅读