• Now Online : 60
  • admin@codemyne.net

Introduction

Often it requires to show some text in input or textbox as hint to the end user. For this generally we use onblur() and onfocus() events. In this example images are used as watermarks instead of text. These images are shown/hide by using Jquery.

The reason to use images is that when a input or text box mode is turned into 'password', we not able to show the text in that box. In password input or textbox text is shown as symbols like '*' or some else. Inorder to show text instead of symbols in password textbox ,here we are using images.

The two images are shown here.

username
password

Now take two input boxes and use the following script in the header section of webpage. The CSS for input boxes is also given in sample code.

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var watermark = "Username";
        if ($("#txtUsername").val() == "") {
            $("#txtUsername").css("background", "#ebebeb url('Images/user.png') no-repeat 10px 0px");
        }
        $("#txtUsername").focus(function () {
                if (watermark == 'Username') {
                $("#txtUsername").css("background-image", "none");
                $("#txtUsername").css("background-color", "#fff");
            }
        }).blur(function () {
                if (this.value == "") {
                $("#txtUsername").css("background", "#ebebeb url('Images/user.png') no-repeat 10px 0px");
            }
        });
    });
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
            var watermark = "pwd";
            if ($("#txtPassword").val() == "") {
            $("#txtPassword").css("background", "#ebebeb url('Images/pwd.png') no-repeat 10px 0px");
        }
        $("#txtPassword").focus(function () {
                if (watermark == 'pwd') {
                $("#txtPassword").css("background-image", "none");
                $("#txtPassword").css("background-color", "#fff");
            }
        }).blur(function () {
                if (this.value == "") {
                $("#txtPassword").css("background", "#ebebeb url('Images/pwd.png') no-repeat 10px 0px");
            }
        });
    });
</script>                            

Comments/Suggestions are invited. Happy coding......!

Comments Post a Comment

dsdssd 5/12/2012 (IST) / Reply

ghgfgffggfdgfggggf

awesome 5/17/2012 (IST) / Reply

Awesome ! This is really useful . Thank you

shravan 8/24/2012 (IST) / Reply

gud

jatin 1/3/2013 (IST) / Reply

rewrer

shfh 2/15/2013 (IST) / Reply

hhccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc