AngularJs Watermark for input text box

AngularJs Watermark for Textbox

Hello everyone, I am going to share the code sample for how to watermark for input text-box in Angularjs.

Here we can achieve angular watermark functionality using the creating custom directive which are give below.


The HTML code is

<input type="email" ng-model="useremail" email-watermark="Enter a Valid Email.."  />



The AngularJs code is

var app = angular.module('watermarkApp', []);

        app.controller('watermarkCtrl', function ($scope) {
            $scope.useremail = null;
        });

        app.directive('emailWatermark', function ($timeout) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, element, attr, ctrl) {
                    $timeout(function () {
                        var onFocus = function () {
                            if (element.val() === attr.emailWatermark) {
                                element.val("");
                            }
                            element.removeClass('watermark');
                        };

                        var onBlur = function () {
                            if (element.val() === "") {
                                element.val(attr.emailWatermark);
                                element.addClass('watermark');
                            }
                        };

                        if (attr.readonly !== true) {
                            element.bind('focus', onFocus);
                            element.bind('blur', onBlur);
                            element.triggerHandler('blur');
                        }

                        //Watching to the value changed.
                        scope.$watch(attr.ngModel, function (v) {
                            onFocus();
                            onBlur();
                        });

                    });
                }
            };
        });

The Live demo code(HTML + AngularJs) as given below

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs watermark for textbox</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script>
        var app = angular.module('watermarkApp', []);

        app.controller('watermarkCtrl', function ($scope) {
            $scope.useremail = null;
        });

        app.directive('emailWatermark', function ($timeout) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, element, attr, ctrl) {
                    $timeout(function () {
                        var onFocus = function () {
                            if (element.val() === attr.emailWatermark) {
                                element.val("");
                            }
                            element.removeClass('watermark');
                        };

                        var onBlur = function () {
                            if (element.val() === "") {
                                element.val(attr.emailWatermark);
                                element.addClass('watermark');
                            }
                        };

                        if (attr.readonly !== true) {
                            element.bind('focus', onFocus);
                            element.bind('blur', onBlur);
                            element.triggerHandler('blur');
                        }

                        //Watching to the value changed.
                        scope.$watch(attr.ngModel, function (v) {
                            onFocus();
                            onBlur();
                        });

                    });
                }
            };
        });

    </script>
</head>
<body ng-app="watermarkApp" ng-controller="watermarkCtrl">
    <h1>AngularJs watermark for textbox</h1>
    <form id="frmEmail">
        Email : <input type="email" ng-model="useremail" email-watermark="Enter a Valid Email.." class="tb8" />
    </form>
</body>
</html>



ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book