Open In App

AngularJS ng-paste Directive

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox