4

Possible Duplicate:
How do I make an HTML text box show a hint when empty?

A very simple question. I would like to place a tooltip within a Textbox similar to the StackOverflow log in. I want the word discount on the textbox value and when the user enters a new value, the word "discount" disappears from the Textbox.

Can I do this by myself using events like OnBlur, OnChange, etc (I don't know which)? Or there is something around that is already done?

Thanks

Community
  • 1
  • 1
ivantxo
  • 719
  • 5
  • 18
  • 36
  • Its called watermarking. – Daniel A. White Sep 27 '11 at 23:22
  • 2
    [Many](http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty) [similar](http://stackoverflow.com/questions/3429520/how-do-i-get-placeholder-text-in-firefox-and-other-browsers-that-dont-support-th) [questions](http://stackoverflow.com/questions/5536346/placeholder-for-search-textbox). – Alex Sep 27 '11 at 23:24
  • Thanks I didn't know that is the name. I'll check later. – ivantxo Sep 28 '11 at 02:09

2 Answers2

6

As said by rudeovski, you can use placeholder in modern browsers.
But for the older one, you'll need a javascript/jQuery fallback.

Here is a good example:

http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback

This will generate placeholder fallback for you automaticly.

You simply have to write:

<input type="text" id="discount" placeholder="discount" />

Modernizr combined with jQuery will do the rest for you.
Hope this help :)

Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
3

You can use placeholder text for this.

<input type="text" id="discount" placeholder="discount" />

To make it work on all browsers, you need to use jquery/javascript for it. As far as i know, it doesn't work in IE.

mnsr
  • 12,337
  • 4
  • 53
  • 79