[英]How to allow copy paste only for number directive angular 9
I have a textbox field that accepts only number.when type the textbox other than numbers it won't allow.我有一个文本框字段,它只接受数字。当输入文本框而不是数字时,它不允许。
problem: 1)copy + paste need to allow only for numbers?问题:1)复制+粘贴需要只允许数字? 2) if I prevent copy-paste, it prevents all.
2)如果我阻止复制粘贴,它会阻止所有。
How to do that.怎么做。 currently, it allows for all.
目前,它允许所有。
here is the directive.这是指令。
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class NumericDirective {
constructor(private el: ElementRef) { }
@Input() OnlyNumber: boolean;
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
if (this.OnlyNumber) {
if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
// (e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
// (e.keyCode == 67 && e.ctrlKey === true) ||
// // Allow: Ctrl+X
// (e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
}
After some research, I found this method.经过一番研究,我发现了这种方法。 Am not sure if it's the cleanest job but it does the work with respect to copy/paste.
我不确定这是否是最干净的工作,但它可以完成复制/粘贴方面的工作。
@HostListener('keyboard,['$event']
onKeyDown(event: KeyboardEvent) {
// Define Regex
// This will allow copy and select all to happen without any issues.
if (event.metaKey) {
if (event.key.toLowerCase() === 'a' || event.key.toLowerCase() === 'c' || event.key.toLowerCase() === 'v') {
return;
}
}
//Validate the keystrokes across regex
}
@HostListener('paste', ['$event'])
onPaste(event: ClipboardEvent) {
let dataToPaste = event.clipboardData.getData('text');
// Validate 'dataToPaste' against the regex
}
As above, apart from listening to the keydown event, I have added a listener for the paste event.如上,除了监听keydown事件之外,我还为粘贴事件添加了监听器。 I suggest the functionality to validate the text against the regex be a separate function.
我建议根据正则表达式验证文本的功能是单独的 function。 Validating the text to be copied will ensure we have only numbers.
验证要复制的文本将确保我们只有数字。
I used this code, works perfect我使用了这段代码,效果很好
@HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {
let event = e.clipboardData.getData('text');
//allow paste only number values
if (!Number(event)){
e.preventDefault();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.