Angular 2+ Prevent user from firing space in a textbox

0
1619

I managed to create a handy directive which accepts what ever key number you give it and prevents them

@Directive( {
    selector : '[prevent-keys]',
    host : {
        '(keydown)' : 'onKeyUp($event)'
    }
} )
export class PreventKeyseDirective {
    @Input( 'prevent-keys' ) preventKeys;
    onKeyUp ( $event ) {
        if ( this.preventKeys && this.preventKeys.includes( $event. keyCode ) ) {
            $event.preventDefault();
        }
    }
}

And then use it like

 <input [prevent-keys]="[32, 37 , 38 , 39 , 40 ]" type="text">

This will prevent space , up , left , down , right keys

LEAVE A REPLY

Please enter your comment!
Please enter your name here