我正在使用Angular2来限制文本框中的复制和粘贴。但是我如何编写自定义指令,以便能够轻松应用所有文本字段。
以下是限制复制和粘贴功能的工作代码。
<ion-input formControlName="confirmpass" type="tel" (cut)="$event.preventDefault()" (copy)="$event.preventDefault()" (paste)="$event.preventDefault()"></ion-input>
答案 0 :(得分:16)
您可以在指令中使用HostListener来捕获cut,paste和copy个事件,然后使用preventDefault()
。这是一个例子
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appBlockCopyPaste]'
})
export class BlockCopyPasteDirective {
constructor() { }
@HostListener('paste', ['$event']) blockPaste(e: KeyboardEvent) {
e.preventDefault();
}
@HostListener('copy', ['$event']) blockCopy(e: KeyboardEvent) {
e.preventDefault();
}
@HostListener('cut', ['$event']) blockCut(e: KeyboardEvent) {
e.preventDefault();
}
}
像这样使用指令
<ion-input appBlockCopyPaste formControlName="confirmpass" type="tel"></ion-input>
答案 1 :(得分:3)
您可以使用Renderer
收听cut,copy,paste
个活动,并在指令中调用preventDefault()
,例如
@Directive({ selector: '[preventCutCopyPaste]' })
export class CopyDirective {
constructor(el: ElementRef, renderer: Renderer) {
var events = 'cut copy paste';
events.split(' ').forEach(e =>
renderer.listen(el.nativeElement, e, (event) => {
event.preventDefault();
})
);
}
}
然后在html中
<input type="text" preventCutCopyPaste/>