Determine Whether User Has Used Cut, Copy or Paste For Data Using AngularJS

Introduction

In my previous articles I told you about:

This article exlains the ng-cut, ng-copy and ng-paste directives of AngularJS.

Using AngularJS you can determine whether the user has cut, copied or pasted anything on the WebPage using the directives provided by the AngularJS.

It might be possible that you don't want the end user to copy, cut or paste anything new on your webpage, for example we don't want anyone to copy our content from our article, in such a cases we can apply AngularJS and determine whether something is copied or not and can take action accordingly, this article will help you to apply such a functionalities to your WebPage.

I will first explain how to determine whether something is copied or not.

Step 1

First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".

For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link and download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application as in the following:

</head>

Step 2

Now I will work on the ViewModel as in the following:

<body>

Hello!

If you copy anything from here

than I will get to Know about it

You have copied: {{copied}}

</body>

For finding the copy we need to use the ng-copy directive, here I have used a tag in which some text is written.

Then one more tag is used to show True as the user will copy whether from the mouse or from the keyboard.

Output

On running the application I select some text and right-click to copy it.

ng-copy ng-cut ng-paste

As I select the "copy", you can see that "True" is shown in the output.

ng-copy ng-cut ng-paste

Now I will show you the "ng-paste" directive, which will show whether the user has pasted in anything or not.

Step 3

Modify your View Model with this code:

<body>

Hello!

If you copy anything from here

than I will get to Know about it

You have copied: {{copied}}

You have pasted in Textbox: {{paste}}

</body>

Now I had added a TextBox which is bound with ng-paste, if anything is pasted in this TextBox than True will be shown.

A tag is used which will show the True value for paste.

Output

Now I again copy some text

ng-copy ng-cut ng-paste

As I paste the Text in the TextBox, True is shown for Paste as well.

Now I will show you the ng-cut Directive, which will show whether user have cut anything or not.

Step 3

Modify your View Model with this code:

<body>

Hello!

If you copy anything from here

than I will get to Know about it

You have copied: {{copied}}

You have cut from Textbox: {{cut}}

You have pasted in Textbox: {{paste}}

</body>

In the TextBox I have added ng-cut, this will bind the TextBox with the Cut Event.

Then I took one more tag which will show the True value whenever the Text will be cut in the TextBox.

Output

Now I will first copy the text and paste it into the TextBox.

ng-copy ng-cut ng-paste

Now as I press Ctrl+X or right-click on the text and cut it than you can see that Cut has become True.

ng-copy ng-cut ng-paste

The complete code of this application is as follows:

</head>

<body>

Hello!

If you copy anything from here

than I will get to Know about it

You have copied: {{copied}}

You have cut from Textbox: {{cut}}

You have pasted in Textbox: {{paste}}

</body>

</html>