AngularJS focus, blur, copy, paste, cut event example


In this article we will see AngularJS focus, blur, copy, paste, cut event example.

Example:
  • Focus event: ng-focus="expression"
    Blur event: ng-blur="expression"
    Place the cursor in the below textbox.


  • Copy event: ng-copy="expression"

    Text copied : {{ copied }}

  • Paste event: ng-paste="expression"

    Text pasted : {{ pasted }}

  • Cut event: ng-cut="expression"

    Text cut : {{ cut }}


Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .exmpul li { padding-bottom: 10px; } .exmpul span { padding: 5px; display: block; background: #ccc; margin: 10px 10px 20px 10px; } .txtbg { background: blue; color: #fff; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <ul> <li>Focus event: <strong>ng-focus="expression"</strong> <br /> Blur event: <strong>ng-blur="expression"</strong> <br /> Place the cursor in the below textbox.<br /> <input type="text" ng-focus="focusbg=true" ng-blur="focusbg=false" ng-class="{txtbg:focusbg}" /> <br /><br /> </li> <li>Copy event: <strong>ng-copy="expression"</strong> <br /> <input type="text" ng-copy="copied=true" value="copy this text" /> <br /> Text copied : {{ copied }} <br /><br /> </li> <li>Paste event: <strong>ng-paste="expression"</strong> <br /> <input type="text" ng-paste="pasted=true" /> <br /> Text pasted : {{ pasted }} <br /><br /> </li> <li>Cut event: <strong>ng-cut="expression"</strong> <br /> <input type="text" ng-cut="cut=true" value="cut this text" /> <br /> Text cut : {{ cut }} <br /><br /> </li> </ul> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.copied = false; $scope.pasted = false; $scope.cut = false; }); </script> </body> </html>