Question

我正在尝试通过将用户的字母转换为有效的首字母来格式化输入字段：大写字母，用点分隔。

输入的格式必须与用户输入的类型相同，而不是随后的格式。

new-customer-form.component.html

<input formatInitials>

format-initials.directive.ts

import { Directive, HostListener } from "@angular/core";

@Directive({
    selector: '[formatInitials]'
})
export class FormatInitialsDirective {
    @HostListener('keyup', [ '$event' ]) private format(event: KeyboardEvent): void {
        const {target} = event;
        const {value} = target;

        const isAlphabeticKeyCode = event.keyCode >= 65 && event.keyCode <= 90;

        if (isAlphabeticKeyCode) { // Only separate with a dot for alphabetic chars 
            target.value = `${value.toUpperCase()}.`;
        }
    }

}

当我键入较慢时，格式可以正常工作，但是当我键入较快时，格式会弄乱，因此，我得到的不是P.J.S，而是PJ.S..。

在执行指令之前，似乎正在处理输入。如何确保仅在格式化发生后才处理输入？

Answer 1

如上一个答案中所述，keyup不能使用，因为您不必在快速键入时按下一个键之前先离开键。

您需要使用keydown和preventDefault()来操作输入的输入，然后再将其放置在输入中。

在您的指令中尝试

import { Directive, HostListener } from "@angular/core";

@Directive({
  selector: '[formatInitials]'
})
export class FormatInitialsDirective {
  @HostListener('keydown', ['$event']) 
  private format(event: KeyboardEvent): void {
    const { target } = event;
    const { value } = target;

    const isAlphabeticKeyCode = event.keyCode >= 65 && event.keyCode <= 90;

    if (isAlphabeticKeyCode) {
      event.preventDefault();
      target.value += `${event.key.toUpperCase()}.`;
    }
  }
}

这是StackBlitz

上的有效示例

Answer 2

使用@ nash11的上述提示，我可以使用它，但是在保留表单中的值时遇到了麻烦，因此我在此处添加了有关更新formControl的值的部分：

import { Directive, HostListener, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
    selector: 'input[formatInitials]',
})
export class FormatInitialsDirective {
    @Input() public formControl: FormControl;

    @HostListener('keydown', ['$event'])
    public format(event: KeyboardEvent): void {
        const { target } = event;
        const isAlphabeticKeyCode = event.keyCode >= 65 && event.keyCode <= 90;

        if (isAlphabeticKeyCode) {
            event.preventDefault();
            (<HTMLInputElement>target).value += `${event.key.toUpperCase()}.`;
            this.formControl.setValue((<HTMLInputElement>target).value);
        }
    }
}

指令格式跟不上快速输入

2 个答案: