Hi! I would like to insert a descriptive text inside an input element that disappers when the user click on it.
I know it is a very common trick, but I do not know how to do that..
What is the simplest/better solution?
+12
A:
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
A better example would be the SO search button! That's where I got this code from. Viewing page source is a valuable tool.
Cory Walker
2009-04-23 12:25:18
Good thinking on your part!
User
2009-04-23 12:27:24
Slight extension to your solution: <input name="q" class="textbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Lazarus
2009-04-23 12:29:55
You can use defaultValue property, so you'll need to write the label text only once (in the value attribute), not three times, in the code: <input type="text" value="Search" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
Rafael
2009-04-23 12:53:20
+3
A:
The common approach is to use the default value as a label, and then remove it when the field gains the focus.
I really dislike this approach as it has accessibility and usability implications.
Instead, I would start by using a standard element next to the field.
Then, if JavaScript is active, set a class on an ancestor element which causes some new styles to apply that:
- Relatively position a div that contains the input and label
- Absolutely position the label
- Absolutely position the input on top of the label
- Remove the borders of the input and set its background-color to transparent
Then, and also whenever the input loses the focus, I test to see if the input has a value. If it does, ensure that an ancestor element has a class (e.g. "hide-label"), otherwise ensure that it does not have that class.
Whenever the input gains the focus, set that class.
The stylesheet would use that classname in a selector to hide the label (using text-indent: -9999px; usually).
This approach provides a decent experience for all users, including those with JS disabled and those using screen readers.
David Dorward
2009-04-23 12:37:38
A:
Another option is to use a background image - if this is pale enough then it can just be left there permenantly, or you could show/hide it as the user entered text if you wanted:
<html>
<head>
<style type="text/css">
.address { background-image: url('image.png'); }
</style>
</head>
<body>
<input type="text" class="address"/>
</body>
</html>
LordSauce
2009-04-23 13:14:57
A:
Here is a simple example, all it does is overlay an image (with whatever wording you want). I saw this technique somewhere. I am using the prototype library so you would need to modify if using something else. With the image loading after window.load it fails gracefully if javascript is disabled.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
<meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css" >
input.searcher
{
background-image: url(/images/search_back.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: center;
}
</style>
<script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
<input type="text" id="q" name="q" value="" />
<script type="text/javascript" language="JavaScript" >
// <![CDATA[
function f(e){
$('q').removeClassName('searcher');
}
function b(e){
if ( $F('q') == '' )
{
$('q').addClassName('searcher');
}
}
Event.observe( 'q', 'focus', f);
Event.observe( 'q', 'blur', b);
Event.observe( window, 'load', b);
// ]]>
</script>
</body>
</html>
brad.v
2009-04-23 14:10:48
+4
A:
In my opinion, the best solution involves neither images nor using the input's default value. Rather, it looks something like David Dorward's solution.
It's easy to implement and degrades nicely for screen readers and users with no javascript.
Take a look at the two examples here: http://attardi.org/labels/
I usually use the second method (labels2) on my forms.
Tex
2010-01-05 09:19:00
the solution with the labels behind a transparent input is actually the cleanest implementation of this that i've ever seen.
nailitdown
2010-01-05 09:24:50
A:
use this
style:
<style type="text/css">
.defaultLabel_on { color:#0F0; }
.defaultLabel_off { color:#CCC; }
</style>
html:
javascript:
function defaultLabelClean() {
inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
inputs[i].value = '';
}
}
}
function defaultLabelAttachEvents(element, label) {
element.setAttribute("innerLabel", label);
element.onfocus = function(e) {
if (this.value==label) {
this.className = 'defaultLabel_on';
this.value = '';
}
}
element.onblur = function(e) {
if (this.value=='') {
this.className = 'defaultLabel_off';
this.value = element.getAttribute("innerLabel");
}
}
if (element.value=='') {
element.className = 'defaultLabel_off';
element.value = element.getAttribute("innerLabel");
}
}
defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");
Just remember to call defaultLabelClean() function before submit form.
good work
davideconsonni
2010-03-18 21:33:36
A:
the above code works quite well if the type of the input is text. but what if the type of the input is a password type?
What I want is, by default, the password field should display "PASSWORD". when i click on the field, the field should clear and when i type on my password, it would display dots instead of characters. Can anybody shed some light on this?
Thank you in advance.
Alexander Barcelo
2010-04-23 10:30:37
Please don't comment using the "answer" function. (But see *my* answer rather then the accepted one)
David Dorward
2010-04-23 10:32:31