1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WarterMark in Textbox Using JQuery

Discussion in 'JavaScript and AJAX' started by mail.yuva, Jan 18, 2011.

  1. mail.yuva

    mail.yuva New Member

    Joined:
    Jan 10, 2011
    Messages:
    44
    Likes Received:
    9
    Trophy Points:
    0
    Occupation:
    Software Developer
    Location:
    Coimbatore
    The watermark effect is to specify some instruction in the textbox and its very useful to the user to know about the textbox control. For example, A Web form will contains a textbox for the user to enter the Date, you can use the watermark effect on the textbox so that it always displays the date format ‘dd/mm/yyyy’ unless the user has already entered something.

    Watermark Effect

    Then add the following Jquery in Script tag and also include jquery-1.4.1.min.js file in Head tag.
    Code:
     
    $(document).ready(function() {
      WaterMark("#txtdate");
    });
    function WaterMark(ControlID) {
      var watermark = "dd/mm/yyyy";
      if ($(ControlID).val() == "") {
        $(ControlID).val(watermark);
        $(ControlID).css("color", "Gray");
    }
     
    $(ControlID).focus(function() {
      if (this.value == watermark) {
        this.value = "";
      }
    }).blur(function() {
      if (this.value == "") {
        this.value = watermark;
      }
    });
    }
     
    suraj2011 likes this.

Share This Page