How to add watermark on a textbox by using javascript?

By | |

There are 3 ways to add watermark functionality on a textbox by using javascript.

<asp:TextBox ID="TextBox1" Text="Search" runat="server" onfocus="javascript:if(this.value=='Search'){this.value=’’;}" onblur="javascript:if(this.value==’’) {this.value='Search';}" />

Or

<script language="javascript" type="text/javascript">
function WaterMark(txtValue, txtWaterMark)
{
if (txtValue.value == txtWaterMark)
txtValue.value = '';
else
txtValue.value = txtWaterMark;
}
</script>
<asp:TextBox ID="TextBox1" Text="Search" runat="server" onblur="WaterMark(this,'Search');" onfocus="WaterMark(this,'Search');" />

Or

function txtfnWaterMark(txtID, WaterMarkText) {
jQuery("#" + txtID).focus(function () {
if (jQuery(this).val() == WaterMarkText) {
jQuery(this).removeClass("water").val("");
}
});
jQuery("#" + txtID).blur(function () {
if (jQuery(this).val() == "") {
jQuery(this).addClass("water").val(WaterMarkText);
}
});
jQuery("#" + txtID).blur();
}

this function call on body onload event

Tagged . Bookmark the permalink.

Leave a Reply