Search

Saturday, October 10, 2015
0 comments

Jquery watermark text of textbox example

12:07 AMSaturday, October 10, 2015
In this article i will show you, water text of textBox using JQuery. i will give you an example of it. When first time browser load, all textbox generate a function, which are contains title of the textbox. Also add a class with all textboxes. Lets see the example of JQuery Watermark text:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .text-based{
            color:#808080;
            font-weight:bold;

        }

    </style>

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
            $('input[type="text"]').each(function () {

                this.value = $(this).attr('title');
                $(this).addClass('text-based');

                $(this).focus(function () {

                    if (this.value == $(this).attr('title')) {

                        this.value = '';
                        $(this).removeClass('text-based');
                    }


                });
                $(this).blur(function () {
                    if (this.value == '') {
                        this.value = $(this).attr('title');
                        $(this).addClass('text-based');

                    }

                })
            })

        });

    </script>
</head>
<body>
    UserName: <input type="text" value="" name="username" title="Enter UserName"/>
</body>
</html>

Code Generate the following output:


Jquery watermark text of textbox example
Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top