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.
You can add and remove a special CSS class and modify the input value onfocus/onblur with JS:
<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;
}
You could easily have a box read "Search" then when the focus is changed to it have the text be removed. Something like this:
<input onfocus="this.value=''" type="text" value="Search" />
Of course if you do that the user's own text will disappear when they click. So you probably want to use something more robust:
<input name="keyword_" type="text" size="25" style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">
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"
onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}"
onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />
Updated: Added the requested coloring-stuff.
Use a background image to render the text :
input.foo { }
input.fooempty { background-image: url("blah.png"); }
then all you have to do is detect value == 0 and apply the right class
<input class="foo fooempty" value="" type="text" name="bar" />
and the jQuery javascript looks likethis
jQuery(function($)
{
var target = $("input.foo");
target.bind("change", function()
{
if( target.val().length > 1 )
{
target.addClass("fooempty");
}
else
{
target.removeClass("fooempty");
}
});
});
you want to assign something like this to onfocus:
if (this.value == this.defaultValue) this.value = ''
this.className = ''
and this to onblur:
if (this.value == '') this.value = this.defaultValue
this.className = 'placeholder'
(you can use something a bit cleverer, like a framework function, to do the classname switching if you want)
With some CSS like this:
input.placeholder{
color: gray;
font-style: italic;
}
That is known as a textbox watermark, and it is done via JavaScript.
or if you use jQuery, a much better approach:
When the page first loads, have Search appear in the text box, colored gray if you want it to be.
When the input box receives focus, select all of the text in the search box so that the user can just start typing, which will delete the selected text in the process. This will also work nicely if the user wants to use the search box a second time since they won't have to manually highlight the previous text to delete it.
<input type="text" value="Search" onfocus="this.select();" />
For jQuery users: naspinski's jQuery link seems broken, but try this one: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
You get a free jQuery plugin tutorial as a bonus. :)
$('input[value="text"]').focus(function(){
if ($(this).attr('class')=='hint')
{
$(this).removeClass('hint');
$(this).val('');
}
});
$('input[value="text"]').blur(function(){
if($(this).val() == '')
{
$(this).addClass('hint');
$(this).val($(this).attr('title'));
}
});
<input type="text" value="" title="Default Watermark Text">
This is called "watermark"
I found this jquery plugin: http://plugins.jquery.com/project/jquery-watermark which unlike the first answer, it does not require extra setup (the original answer also needs a special call to before the form is submitted).
I found this jquery plugin to be better than the one listed in the top answer: http://code.google.com/p/jquery-watermark/
Why better? Because it supports password input fields. Also, setting the color of the watermark (or other attributes) is as easy as creating a .watermark reference in your CSS file.
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.
The font-style and color will have to be changed via JavaScript (until :valid or something similar is released for CSS), but the Placeholder (not watermark) text can be done with the placeholder attribute. It currently only works in a few browsers, but it is part of the HTML5 standard, so start using it :)
<input placeholder="Search" type="search" name="search" />
Use jquery-formnotifier - it is one of the most popular jquery plugins, and doesn't suffer from the bugs some of the other jquery suggestions here do (eg, you can freely style the watermark, without worrying if it will get saved to the database).
jquery-watermark uses a single css style directly on the form elements (I noticed that css font-size properties applied to the watermark also affected the text boxes--not what I wanted). The plus with jquery-watermark is you can drag-drop text into fields (jquery-formnotifier doesn't allow this).
another one suggested by some others (the one at digitalbrush.com), will accidentally submit the watermark value to your form, so I strongly recommend against it.