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

• Wednesday 31st May
• Posted by Jordan Harper