Post
Ask Question

Watermark Text in AngularJs

When we need to provide some hint to the textbox, watermark text is an option. Watermark text provides some text as a hint to the user as to what they are going to enter. As soon as the text receives focus the watermark removes on its own and again reappears when it loses focus.

Let us see how to achieve this in angular Js. We need to create a custom directive which will be applied to the textbox which need to get watermark text.

Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <style type="text/css">  
  5.         .watermarkText  
  6.         {  
  7.             width: 145px;  
  8.             height: 24px;  
  9.             border: 1px solid #3366FF;  
  10.               
  11.         }  
  12.         .watermark  
  13.         {  
  14.             font-weight: bold;  
  15.         }  
  16.     </style>  
  17.       
  18.     <title>angularjs watermark for textbox</title>  
  19.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>  
  20.     <script>  
  21.         var app = angular.module('watermarkApp', []);  
  22.   
  23.         app.controller('watermarkCtrl', function ($scope) {  
  24.             $scope.username = null;  
  25.         });  
  26.   
  27.         app.directive('watermarkText', function ($timeout) {  
  28.             return {  
  29.                 restrict: 'A',  
  30.                 require: 'ngModel',  
  31.                 link: function (scope, element, attr, ctrl) {  
  32.                     $timeout(function () {  
  33.                         var onFocus = function () {  
  34.                             if (element.val() === attr.watermarkText) {  
  35.                                 element.val("");  
  36.                             }  
  37.                             element.removeClass('watermark');  
  38.                         };  
  39.   
  40.                         var onBlur = function () {  
  41.   
  42.                             if (element.val() === "") {  
  43.                                 element.val(attr.watermarkText);  
  44.                                 element.addClass('watermark');  
  45.                             }  
  46.                         };  
  47.   
  48.                         if (attr.readonly !== true) {  
  49.                             element.bind('focus', onFocus);  
  50.                             element.bind('blur', onBlur);  
  51.                             element.triggerHandler('blur');  
  52.                         }  
  53.   
  54.                         scope.$watch(attr.ngModel, function (v) {  
  55.                             onFocus();  
  56.                             onBlur();  
  57.                         });  
  58.   
  59.                     });  
  60.                 }  
  61.             };  
  62.         });  
  63.   
  64.     </script>  
  65. </head>  
  66. <body ng-app="watermarkApp" ng-controller="watermarkCtrl">  
  67.       
  68.     <div style="height: 210px; width: 600px; border: 5px solid gray;">  
  69.         <h1>  
  70.             Water Mark Text in AngularJs</h1>  
  71.         <table>  
  72.             <tr>  
  73.                 <td>  
  74.                     User Name :  
  75.                     <input type="text" ng-model="username" watermark-text="Enter your user Name....."  
  76.                         class="watermarkText" />  
  77.                 </td>  
  78.             </tr>  
  79.             <tr>  
  80.                 <td>  
  81.                     Password :  
  82.                     <input type="text" ng-model="userpwd" watermark-text="Enter your  password..." class="watermarkText" />  
  83.                 </td>  
  84.             </tr>  
  85.             <tr>  
  86.                 <td>  
  87.                     <input type="submit" value="Save" />  
  88.                 </td>  
  89.             </tr>  
  90.         </table>  
  91.     </div>  
  92.   
  93. </body>  
  94. </html>  

Output:

 
 Hope you got the information on water mark text and how to achieve it in angular Js .Thank you for reading.
Next Recommended Reading Text Formatting In Kendo UI Grid With Angular