如何防止使用 angular 模板驱动表单在文本输入中输入特定字符

Question

我有一个使用 angular 模板驱动表单的文本输入。当用户键入点字符（也称为句点或句点）时，我不想像往常一样将其添加到输入中，而是想捕获事件并将焦点放在不同的文本输入上。

我正在使用 (keyup.dot) 捕获事件并有一个处理它的方法。

<input [(ngModel)]="word" name="word" (keyup.dot)="focusOtherInput($event)">

在这个方法中，我希望 e.preventDefault() 意味着点没有被添加到输入中，但它仍在被添加。（将焦点放在其他输入上效果很好，因此与此问题无关。）

focusOtherInput(e: KeyboardEvent) {
    e.preventDefault();
    // Other code here for focusing the other input
}

为什么 e.preventDefault() 在这种情况下不起作用？

Answer 1

这不起作用的原因是我正在收听的 keyup 事件不是在将点字符放入输入时发生的。更改为使用 keydown 事件会产生所需的行为。

<input [(ngModel)]="word" name="word" (keydown.dot)="focusOtherInput($event)">

使用 e.preventDefault() 没有问题，这确实阻止了将点添加到输入中。

How can I prevent a specific character being entered in a text input using angular template driven forms