Open In App

AngularJS ng-paste Directive

Improve
Improve
Like Article
Like
Save
Share
Report

The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and <textarea>

Syntax:

<element ng-paste="expression"> 
    Content ... 
</element> 

Parameter:

  • expression: It specifies what to do when the input is pasted into an HTML element. 

Example 1: This example describes the ng-paste directive in AngularJS, by specifying the boolean value that displays whether the text is pasted or not.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-paste Directive</title>
    <script src=
    </script>
    <style>
        body {
            text-align: center;
            font-family: sans-serif;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body ng-app>
    <h1>GeeksforGeeks</h1>
    <h2>ng-paste Directive</h2>
    <div ng-init="ispaste=false;paste='Paste some text!'">
        <textarea ng-paste="ispaste=true" 
                  ng-model="paste">
        </textarea><br />
        <pre>Paste status: {{ispaste}}</pre>
    </div>
</body>
</html>


Output:

 

Example 2: This example describes the ng-paste directive in AngularJS, where it specifies the number of times the text is pasted, its total count will be displayed accordingly.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-paste Directive</title>
    <script src=
    </script>
    <style>
        body {
            text-align: center;
            font-family: sans-serif;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body ng-app="">
    <h1>GeeksforGeeks</h1>
    <h2>ng-paste Directive</h2>
    <p>paste the "GeeksforGeeks" text</p>
    <input ng-paste="paste = paste + 1" 
           ng-init="paste=0" 
           value="GeeksforGeeks" />
    <p> {{paste}} times text pasted.</p>
</body>
</html>


Output:

 



Last Updated : 03 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads