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.

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>