Skip to navigation

Input placeholders

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();
}

See it in action

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.

Nurit Hailey · Wednesday 19th September at 21:34

that’s why it will never wor. Nurit Hailey.

fdfdf · Friday 25th July at 14:48

d

Frog · Sunday 11th January at 21:01

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?

Dia · Sunday 18th January at 00:11

SOS! My car was broken on road. Shoupd I call to repairs or police?

Promo · Sunday 18th January at 21:56

wondefful think)

Lirika · Monday 19th January at 23:54

Good night, bloggers =)

Lerika · Thursday 22nd January at 15:09

what a ture story..

beOn · Wednesday 18th February at 18:04

Take note - I had to replace some smart quotes up in that code.

Gabor · Monday 27th July at 20:53

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

RQ · Wednesday 2nd December at 15:07

Frog above has a good point.

Another thing: you should use onfocus instead of onclick.

32312 · Saturday 23rd January at 11:33

321

John · Tuesday 26th January at 14:52

Did you know that “placeholder” is working in Chrome too?

Nathan · Wednesday 27th January at 00:16

Love it. Thanks a lot, Jordan!

andy moon · Monday 8th February at 12:00

Nice!
What about color? Is here the way, how to do gray for placeholder and black for text value in FF or IE?

Tnx

Jeremy · Tuesday 13th April at 20:05

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.

chris · Thursday 22nd April at 03:50

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.

Bernardo · Thursday 22nd April at 04:10

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).

Romac · Sunday 25th April at 19:25

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!

Chris M · Sunday 25th April at 20:03

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.

Horia · Monday 26th April at 08:34

Sorry to say that this topic is rather old and that this implementation is rather coarse.

Do iterate on it, mister. Good luck.

Onur · Wednesday 12th May at 09:58

Nice!
What about color? Is here the way, how to do gray for placeholder and black for text value in FF or IE?

Tnx

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.