Post
Ask Question

Paste Event in AngularJS

Introduction
This article explains how to use the paste events in AngularJS. After cutting or copying the selected text we can also check whether the specified text has been pasted from somewhere or not. The directive ng-paste can be used to check the pasted status in AngularJS.
 
Cut and Copy Events are already explained in Cut and Copy Event in AngularJS in my previous article.
 
ng-paste
Now I will show you how to use the ng-paste directive of AngularJS.
Write the following code in the body section of your application:
  1. <input ng-paste="paste='Pasted'" ng-init="paste='Not Pasted'; value='Somthing Paste Here'" ng-model="value">    
  2. </br>  
  3. <h3>Status: {{paste}}  <h3>  
Here I have created a TextBox in which I have put the default value of the textbox ("Something Paste Here") using ng-model directives,
I have set the initial value "paste=false" using "ng-init". When a copy has not been done then initially the value will be false and I have set the value of "paste=true" of "ng-paste" so when any cut or copied text is pasted into this text box then the Status wil be "Pasted".
 
Complete Code:
  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <script src="angular.min.js"></script>  
  5.     <title>Pate Event</title>  
  6.   </head>  
  7.   <body>  
  8. <input ng-paste="paste='Pasted'" ng-init="paste='Not Pasted'; value='Somthing Paste Here'" ng-model="value">    
  9. </br>  
  10. <h3>Status: {{paste}}  <h3>  
  11.   </body>  
  12. </html>  
Output:
 
When nothing has been pasted into the TextBox:
 
 After pasting somthing into the TextBox:
 


Similar Articles