How to Disable Copy Paste in an Input Field in Angular?

When we are working on an Angular application, there can be certain situations where we need to restrict the user from copying and pasting sensitive information or data that needs to be entered manually.

In Angular, there are a number of ways to do this.

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

So, if we want to prevent these actions, we have to bind these events i.e. cut, copy and paste to the input field and call the preventDefault() method. The preventDefault() method allows you to prevent the default actions on the given event.

See the following example:

<!-- Prevent Cut, Copy & Paste actions -->
<input type="text" placeholder="Type something" (cut)="$event.preventDefault()" (copy)="$event.preventDefault()" (paste)="$event.preventDefault()">

Here is the outcome of the above code:

You can also bind these events with some custom functions in the component.ts file and give some message to the user if he tries to cut, copy or paste the sensitive information.

<!-- Prevent Cut, Copy & Paste actions -->
<input type="text" placeholder="Type something" (cut)="DisableCut($event)" (copy)="DisableCopy($event)" (paste)="DisablePaste($event)">

Now define the DisableCut(), DisableCopy() and DisablePaste() functions inside the component.ts file and give some message to the user if he attempts any of these operations.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-comp-one',
  templateUrl: './comp-one.component.html',
  styleUrls: ['./comp-one.component.css']
})
export class CompOneComponent implements OnInit{

  constructor() {}

  ngOnInit(): void {}

  DisableCut(event:any){
    alert("Cut operation is not allowed");
    event.preventDefault();
  }

  DisableCopy(event:any){
    alert("You can't copy this information");
    event.preventDefault();
  }

  DisablePaste(event:any){
    alert("You can't paste in this input");
    event.preventDefault();
  }

}

Here is the outcome of the above code:

Creating an Angular Directive to Disable Copy Paste

In the above examples, we manually bind each event i.e. cut, copy and paste to the input field on which we want to disable the copying and pasting.

We have to follow the same process every time we want to prevent these actions on any input field i.e. repetition of the same code again and again.

But, there is a much simpler way to do this by using the Angular directives. We can define the functionality of preventing copying and pasting just once in the directive and use it anywhere in the entire application wherever we need it.

So, generate a new directive in your project by typing the following command in the command line:

ng generate directive disableCopyPaste

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

Now, open up your disable-copy-paste.directive.ts directive file and add the below code there:

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

@Directive({
  selector: '[appDisableCopyPaste]'
})
export class DisableCopyPasteDirective {

  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();
  }

}

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

So now, if we want to disable the cut, copy and paste event on an input element, we can directly use the appDisableCopyPaste directive on that element.

See the following example:

<!-- Prevent Cut, Copy & Paste actions using Directive -->
<input type="text" placeholder="Type something" appDisableCopyPaste>

In the above example, we have inserted the appDisableCopyPaste directive into the text input field. This will prevent the cut, copy and paste actions on the input element.

Here is the outcome of the above code:

Conclusion

To disable copy paste in an input field in Angular, we can bind it to the (copy) and (paste) events and then use the event.preventDefault() method to prevent all actions related to each event.

We can also create a custom directive to disable the cut, copy and paste events on any input field. So, instead of binding these events manually to each input, we can use the directive name. This can also produce the same result.

Thanks for reading.