Home Search Member List Faq Register Login  
JavaScript Tips
Create your own watermark textbox

Thread Starter: Karamasoft   Started: 09-04-2007 7:04 PM   Replies: 0
 Karamasoft Support Forums » General Discussions » JavaScript Tips » Create your own watermark textbox
 Printable Version    « Previous Thread   Next Thread »
  04 Sep 2007, 7:04 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Create your own watermark textbox

The main purpose of a watermark is to provide information to the user about the textbox without cluttering up the page. You have probably seen many examples of this in search textboxes in websites. When a watermarked textbox is empty, it displays a message to the user. Once the user types some text into the textbox, the watermarked text disappears. When the user leaves the textbox the watermarked text appears again if the content of the textbox is empty.

You can easily change your textbox to provide watermark behavior by adding onfocus and onblur event handlers. In the focus event, clear the textbox if its text matches the watermark text. In the blur event, set the text back to watermark text if the textbox empty.

JavaScript
function WatermarkFocus(txtElem, strWatermark) {
 if (txtElem.value == strWatermark) txtElem.value = '';
}

function WatermarkBlur(txtElem, strWatermark) {
 if (txtElem.value == '') txtElem.value = strWatermark;
}

ASPX
<asp:TextBox ID="txtWatermark" runat="server" />

C#
protected void Page_Load(object sender, EventArgs e)
{
 string strWatermark = "Search Karamasoft.com";
 txtWatermark.Text = strWatermark;
 txtWatermark.Attributes.Add("onfocus", "WatermarkFocus(this, '" + strWatermark + "');");
 txtWatermark.Attributes.Add("onblur", "WatermarkBlur(this, '" + strWatermark + "');");
}


  
 Page 1 of 1 (1 items)
Karamasoft Support Forums » General Discussions » JavaScript Tips » Create your own watermark textbox

You can add attachments
You can post new topics
You can reply to topics
You can delete your posts
You can edit your posts
You can create polls
You can vote in polls
Forum statistics are enabled
Forum is unmoderated

© 2002-2018 Karamasoft LLC. All rights reserved.