Directive to disable Cut, Copy and Paste for textbox using Angular 7

Errorlogger
0
Recently I was working a Angular form validation and directive. I was creating a directive to disable Cut, Copy and Paste function for textbox in Angular.
In this post I will show Directive to disable Cut, Copy and Paste for textbox using Angular 7.
You can use a HostListener in your directive to catch cut, paste and copy events and then use preventDefault(). Here's an example:
**********************************************************************************
Directive
block-copy-paste.directive.ts

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();
    }
}
**********************************************************************************
Use directive like so:
<input placeholder="Can't copy/paste" type="text" appBlockCopyPaste />
**********************************************************************************

Happy Coding :) 

Post a Comment

0Comments

Post a Comment (0)

#buttons=(Accept !) #days=(30)

Our website uses cookies to enhance your experience. Check Now
Accept !