I have created a directive to forbid user from entering negative values and special characters in input box. With the below code user is not able to copy paste anything via keyboard. Also, i need to take care that if user paste any special character it should be replace by empty character.
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[esg365-positiveNumbersOnly]'
})
export class NumbersOnlyDirective {
private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/);
private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home'];
constructor(private readonly el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
console.log('Keyboard event is::',event);
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
import {Directive, HostListener, ElementRef} from '@angular/core';
@Directive({
selector: '[esg365-positiveNumbersOnly]'
})
export class NumbersOnlyDirective {
private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/);
private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home'];
constructor(private readonly el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.specialKeys.indexOf(event.key) !== -1 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: Ctrl+C
(event.keyCode == 67 && event.ctrlKey === true) ||
// Allow: Ctrl+X
(event.keyCode == 88 && event.ctrlKey === true) ||
// Allow: Ctrl+V
(event.keyCode == 86 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)
) {
return;
}
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
or
import {Directive, HostListener, ElementRef} from '@angular/core';
@Directive({
selector: '[esg365-positiveNumbersOnly]'
})
export class NumbersOnlyDirective {
private readonly regex: RegExp = new RegExp(/^\d+(\.\d{0,2})?$/);
private readonly specialKeys: String[] = ['Backspace', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Delete', 'Home'];
constructor(private readonly el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.specialKeys.indexOf(event.key) !== -1 ||
// Allow: Ctrl+A
(event.key == 'Select' && event.ctrlKey === true) ||
// Allow: Ctrl+C
(event.key == 'Copy' && event.ctrlKey === true) ||
// Allow: Ctrl+X
(event.key == 'Cut' && event.ctrlKey === true) ||
// Allow: Ctrl+V
(event.key == 'Paste' && event.ctrlKey === true) ||
// Allow: home
(event.key == 'Home' && event.ctrlKey === true) ||
// Allow: end
(event.key == 'End' && event.ctrlKey === true) ||
// Allow: left
(event.key == 'Left' && event.ctrlKey === true) ||
// Allow: right
(event.key == 'Right' && event.ctrlKey === true)
) {
return;
}
const current: string = this.el.nativeElement.value;
const next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}