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


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

I want the search box on my web page to display the word “Search” in gray italics. When the box receives focus, it should look just like an empty text box. If there is already text in it, it should display the text normally (black, non-italics). This will help me avoid clutter by removing the label.
BTW, this is an on-page Ajax search, so it has no button.


Solution 1:

Another option, if you’re happy to have this feature only for newer browsers, is to use the support offered by HTML 5’s placeholder attribute:

<input name="email" placeholder="Email Address">

In the absence of any styles, in Chrome this looks like:

enter image description here

You can try demos out here and in HTML5 Placeholder Styling with CSS.

Be sure to check the browser compatibility of this feature. Support in Firefox was added in 3.7. Chrome is fine. Internet Explorer only added support in 10. If you target a browser that does not support input placeholders, you can use a jQuery plugin called jQuery HTML5 Placeholder, and then just add the following JavaScript code to enable it.

$('input[placeholder], textarea[placeholder]').placeholder();

Solution 2:

That is known as a textbox watermark, and it is done via JavaScript.

or if you use jQuery, a much better approach:

Solution 3:

You can set the placeholder using the placeholder attribute in HTML (browser support). The font-style and color can be changed with CSS (although browser support is limited).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
input[type=search]:-moz-placeholder { /* Firefox 18- */
input[type=search]::-moz-placeholder { /* Firefox 19+ */
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
<input placeholder="Search" type="search" name="q">

Solution 4:

You can add and remove a special CSS class and modify the input value onfocus/onblur with JavaScript:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Then specify a hint class with the styling you want in your CSS for example:

input.hint {
    color: grey;

Solution 5:

The best way is to wire up your JavaScript events using some kind of JavaScript library like jQuery or YUI and put your code in an external .js-file.

But if you want a quick-and-dirty solution this is your inline HTML-solution:

<input type="text" id="textbox" value="Search"
    onblur="if(this.value==''){this.value='Search';'#555'}" />

Updated: Added the requested coloring-stuff.

Solution 6:

I posted a solution for this on my website some time ago. To use it, import a single .js file:

<script type="text/javascript" src="/hint-textbox.js"></script>

Then annotate whatever inputs you want to have hints with the CSS class hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

More information and example are available here.