Я создал угловую директиву, которая позволяет вводить только числовые значения в текстовое поле ввода.Он работает нормально, однако я не могу заставить его обнаруживать комбинации клавиш быстрого копирования ctrl + c и ctrl + v.
. В коде ниже в onKeyDown HostListener я думаю, что проверка должна быть там.Я могу добавить проверку с помощью e.keyCode следующим образом:
// Allow: Ctrl+C
(e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+V
(e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
, но keyCode теперь устарел, поэтому нужна альтернатива этому.Я пробовал использовать hostListener для клавиш ctrl + c и ctrl + v с помощью EventEmitter, но я не уверен, что это подход к использованию.
Вот моя директива:
import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {
private clipboardSanitisationRegex: RegExp = new RegExp(/[^0-9\.]/g);
// Allow decimal numbers and negative values
private allowableCharactersRegex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);
// Allow key codes for special events. Reflect :
// Backspace, tab, end, home
private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', '-' ];
constructor(private el: ElementRef) {
debugger;
// Sanatize clipboard by removing any non-numeric input after pasting
this.el.nativeElement.onpaste = (e:any) => {
e.preventDefault();
let text;
let clp = (e.originalEvent || e).clipboardData;
if (clp === undefined || clp === null) {
text = (<any>window).clipboardData.getData('text') || '';
console.log('text = ' + text);
if (text !== '') {
text = text.replace(this.clipboardSanitisationRegex, '');
if (window.getSelection) {
let newNode = document.createElement('span');
newNode.innerHTML = text;
window.getSelection().getRangeAt(0).insertNode(newNode);
} else {
(<any>window).selection.createRange().pasteHTML(text);
}
}
} else {
text = clp.getData('text/plain') || '';
if (text !== '') {
text = text.replace(this.clipboardSanitisationRegex, '');
document.execCommand('insertText', false, text);
}
}
};
}
@HostListener('keydown', [ '$event' ])
onKeyDown(event: KeyboardEvent) {
debugger;
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
let current: string = this.el.nativeElement.value;
let next: string = current.concat(event.key);
if (next && !String(next).match(this.allowableCharactersRegex)) {
event.preventDefault();
}
}
}