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

Question

I have a text input using angular template driven forms. When the user types the dot character (also known as full stop or period), instead of it being added to the input as normal I want to capture the event and put the focus on a different text input.

I'm capturing the event using (keyup.dot) and have a method which handles it.

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

Within this method I was hoping that e.preventDefault() would mean the dot isn't added to the input, but it is still being added. (Putting the focus on the other input works fine, so isn't relevant to this question.)

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

Why is e.preventDefault() not working in this scenario?

Answer 1

The reason this wasn't working is that the keyup event that I was listening to is not when the dot character is being put into the input. Changing to use the keydown event gives the desired behaviour.

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

There was no problem using e.preventDefault(), that does indeed prevent the dot being added to the input.