Disabling Cut Copy Paste

There may be a situation where you need to disable cut or copy from or paste to an input field in your application. You can restrict users from copying and pasting sensitive information or data that needs to be entered manually in the input field.

There are various ways you can restrict users to cut/copy or paste in an input field.

One way is to use (cut), (copy) and (paste) event handlers. These event handlers are triggered while a user attempts to cut, copy or paste the content in an input field.

So to make the event handlers working you need to bind these events in input field and call the preventDefault() method which will prevent the default action on the given event.

The following example shows how to do it:

<input type="text" id="demo1" name="demo1" placeholder="Demo 1" (cut)="$event.preventDefault()" (copy)="$event.preventDefault()" (paste)="$event.preventDefault()">

The second way is to bind these events with some custom functions in the TypeScript file and prevent users from copying or pasting in an input field.

The following example shows how to do it. Let’s say your app.component.html file has the following input field:

<input type="text" id="demo2" name="demo2" placeholder="Demo 2" (cut)="disableCut($event)" (copy)="disableCopy($event)" (paste)="disablePaste($event)">

And your app.component.ts file will contain the corresponding function:

disableCut($event: ClipboardEvent) {
  $event.preventDefault();
}

disableCopy($event: ClipboardEvent) {
  $event.preventDefault();
}

disablePaste($event: ClipboardEvent) {
  $event.preventDefault();
}

There is even a simpler way to disable copy, paste using Angular directive.

You can define the functionality of preventing copying and pasting just once in the directive and use it anywhere in the entire application wherever you need to use it.

You can generate a new directive in your project by typing the following command in the command line:

ng generate disableCutCopyPaste

This command will generate a new directive named appDisableCutCopyPaste in your project. It will create two files inside the app folder of your project disable-cut-copy-paste.directive.ts and disable-cut-copy-paste.directive.spec.ts. The spec.ts file is for testing purpose only.

Now open file disable-cut-copy-paste.directive.ts and copy the code as shown below:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDisableCutCopyPaste]',
  standalone: true
})
export class DisableCutCopyPasteDirective {

  constructor() { }

  @HostListener('paste', ['$event']) disablePaste(e: KeyboardEvent) {
    e.preventDefault();
  }

  @HostListener('copy', ['$event']) disableCopy(e: KeyboardEvent) {
    e.preventDefault();
  }

  @HostListener('cut', ['$event']) disableCut(e: KeyboardEvent) {
    e.preventDefault();
  }

}

In the above example, the @HostListener decorator is used to listen to the cut, copy and paste event and preventing the default actions using the event.preventDefault() method.

So now, if you want to disable the cut, copy and paste event on an input element, you can directly use the appDisableCutCopyPaste directive on that element as shown in the following example.

<input type="text" id="demo3" name="demo3" placeholder="Demo 3" appDisableCutCopyPaste>

The directive appDisableCutCopyPaste will prevent the cut, copy and paste actions on the input element.

Here is the following output:

Prerequisites

Node v18.17.1, Npm 10.2.5, Angular 17.0.0

Source Code

Download