Being a dirty Windows boy, I was surprised recently to find that Apple’s Safari browser supports a very neat ‘placeholder’ attribute on text <input> tags, that works thusly:
<input type="text" placeholder="Type something here" />
Safari goes on to insert the specified ‘placeholder’ text into the value of the input field, until clicked on, when it disappears (and only reappears if the field is left empty). This is a great little idea as it provides a lovely, unobtrusive way to offer a very commonly used functionality.
In addition, it offers a way of specifying the ‘placeholder’ text without explicitly putting it in the ‘value’ attribute, which benefits screenreader users, as they won’t have to hear the <input />’s placeholder text read out when they focus on it (presumably, the <label> has already given him or her enough of a hint as to what the field requires).
Of course, the big downside is that it’s Safari only, but it’s very easy to get IE and Firefox to ‘understand’ the placeholder attribute, with the help of a little Javascript.
All you need to do is define the function activatePlaceholders() in the head of your HTML document, then activate it when the page loads:
function activatePlaceholders() {
var detect = navigator.userAgent.toLowerCase();
if (detect.indexOf(”safari”) > 0) return false;
var inputs = document.getElementsByTagName(”input”);
for (var i=0;i<inputs.length;i++) {
if (inputs[i].getAttribute(”type”) == “text”) {
if (inputs[i].getAttribute(”placeholder”) && inputs[i].getAttribute(”placeholder”).length > 0) {
inputs[i].value = inputs[i].getAttribute(”placeholder”);
inputs[i].onclick = function() {
if (this.value == this.getAttribute(”placeholder”)) {
this.value = “”;
}
return false;
}
inputs[i].onblur = function() {
if (this.value.length < 1) {
this.value = this.getAttribute(”placeholder”);
}
}
}
}
}
}
window.onload=function() {
activatePlaceholders();
}
So far 21 people have argued with us about ‘Input placeholders’. Read what they've said and then add to our woes using the form below.
Love what we’ve said? Think we’re talking nonsense? Don’t worry about being polite, just let us have it. We’re not afraid of telling you that you’re talking crap, so don’t be afraid of telling us the same.
that’s why it will never wor. Nurit Hailey.
d
I love this code, but I think there’s a downside to it: if the user doesn’t fill in a field in a browser other than Safari, the placeholder text is sended and not a blank field. Do you know a solution to that?
SOS! My car was broken on road. Shoupd I call to repairs or police?
wondefful think)
Good night, bloggers =)
what a ture story..
Take note - I had to replace some smart quotes up in that code.
When copying the source out in Firefox 3.5, the quotes get replaced with another character - make sure you replace them with correct quotes before you use this code! G
Frog above has a good point.
Another thing: you should use onfocus instead of onclick.
321
Did you know that “placeholder” is working in Chrome too?
Love it. Thanks a lot, Jordan!
Nice!
What about color? Is here the way, how to do gray for placeholder and black for text value in FF or IE?
Tnx
For what it’s worth, last.fm does it this way as well. Though I agree with others the value needs to be cleared before submission.
There are two options for clearing on submission. One, interrupt the submit with javascript, search the fields and remove the placeholders then proceed with the submit, or two, in your form validation, remove any text which matches a placeholder.
Thing is, if you put ‘placeholder’ where it’s not supported, unless you add it as a value as well, you’ll have no non-js fallback, leaving the user with no idea what should go in the field (only if you don’t use a label as well).
You might be interested by this little jQuery plugin which activates the “placeholder” attribute but also take care of clearing the non-filled fields and that adds classes to the “input”s in order to be able to skin them.
Here it is: http://github.com/romac/jQuery.placeHoldize
Any feedback is welcome!
Its not really a safari thing its webkit; and the placeholder attribute is HTML5
>>
http://dev.w3.org/html5/spec-author-view/common-input-element-attributes.html#the-placeholder-attribute
So doesn’t really belong in a html4/xhtml1 document.
Sorry to say that this topic is rather old and that this implementation is rather coarse.
Do iterate on it, mister. Good luck.
Nice!
What about color? Is here the way, how to do gray for placeholder and black for text value in FF or IE?
Tnx