Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   WarterMark in Textbox Using JQuery (http://www.go4expert.com/forums/wartermark-textbox-using-jquery-t24599/)

mail.yuva 18Jan2011 14:20

WarterMark in Textbox Using JQuery
 
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;
  }
});
}



All times are GMT +5.5. The time now is 16:03.