Missing options are now auto-added to tasks
Added onlyNumber directive for number-only inputspull/809/head
parent
67e13cb23b
commit
8bc14a8be8
@ -0,0 +1,8 @@
|
|||||||
|
import { OnlyNumberDirective } from './only-number.directive';
|
||||||
|
|
||||||
|
describe('OnlyNumberDirective', () => {
|
||||||
|
it('should create an instance', () => {
|
||||||
|
const directive = new OnlyNumberDirective();
|
||||||
|
expect(directive).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
// https://stackoverflow.com/a/58535434/8088021
|
||||||
|
|
||||||
|
import { Directive, ElementRef, HostListener } from '@angular/core';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[onlyNumber]'
|
||||||
|
})
|
||||||
|
export class OnlyNumberDirective {
|
||||||
|
|
||||||
|
private navigationKeys = [
|
||||||
|
'Backspace',
|
||||||
|
'Delete',
|
||||||
|
'Tab',
|
||||||
|
'Escape',
|
||||||
|
'Enter',
|
||||||
|
'Home',
|
||||||
|
'End',
|
||||||
|
'ArrowLeft',
|
||||||
|
'ArrowRight',
|
||||||
|
'Clear',
|
||||||
|
'Copy',
|
||||||
|
'Paste'
|
||||||
|
];
|
||||||
|
inputElement: HTMLElement;
|
||||||
|
constructor(public el: ElementRef) {
|
||||||
|
this.inputElement = el.nativeElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostListener('keydown', ['$event'])
|
||||||
|
onKeyDown(e: KeyboardEvent) {
|
||||||
|
if (
|
||||||
|
this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
|
||||||
|
(e.key === 'a' && e.ctrlKey === true) || // Allow: Ctrl+A
|
||||||
|
(e.key === 'c' && e.ctrlKey === true) || // Allow: Ctrl+C
|
||||||
|
(e.key === 'v' && e.ctrlKey === true) || // Allow: Ctrl+V
|
||||||
|
(e.key === 'x' && e.ctrlKey === true) || // Allow: Ctrl+X
|
||||||
|
(e.key === 'a' && e.metaKey === true) || // Allow: Cmd+A (Mac)
|
||||||
|
(e.key === 'c' && e.metaKey === true) || // Allow: Cmd+C (Mac)
|
||||||
|
(e.key === 'v' && e.metaKey === true) || // Allow: Cmd+V (Mac)
|
||||||
|
(e.key === 'x' && e.metaKey === true) // Allow: Cmd+X (Mac)
|
||||||
|
) {
|
||||||
|
// let it happen, don't do anything
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Ensure that it is a number and stop the keypress
|
||||||
|
const key = Number(e.key)
|
||||||
|
if (
|
||||||
|
(e.shiftKey || (isNaN(key) && !(e.key === '.')))
|
||||||
|
) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostListener('paste', ['$event'])
|
||||||
|
onPaste(event: ClipboardEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
const pastedInput: string = event.clipboardData
|
||||||
|
.getData('text/plain')
|
||||||
|
.replace(/\D/g, ''); // get a digit-only string
|
||||||
|
document.execCommand('insertText', false, pastedInput);
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostListener('drop', ['$event'])
|
||||||
|
onDrop(event: DragEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
const textData = event.dataTransfer.getData('text').replace(/\D/g, '');
|
||||||
|
this.inputElement.focus();
|
||||||
|
document.execCommand('insertText', false, textData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue