I've been using a JavaScript placeholder script, to support IE placeholders.

Works fine for input type = text. But how do I write an addition to the script to support textarea?

My code is :

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

Thanks in advance.

I've been using a JavaScript placeholder script, to support IE placeholders.

Works fine for input type = text. But how do I write an addition to the script to support textarea?

My code is :

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

Thanks in advance.

• javascript
• placeholder

Share Improve this question Follow asked Jan 10, 2012 at 11:13 StuBlackettStuBlackett 3,8591515 gold badges7171 silver badges116116 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

textarea is not a input type. It is a tag in itself. Example

<textarea rows=10 placeholder="Enter text here"></textarea>

In this case, your code can be

var inputs = document.getElementsByTagName("textarea");
inputs[0].setAttribute('placeholder','New placeholder');

Hope it helps

Simply query for text area elements

function activatePlaceholders() {
var detect = navigator.userAgent.toLowerCase();
if (detect.indexOf("safari") > 0) return false;
var inputs = document.getElementsByTagName("textarea");
for (var i=0;i<inputs.length;i++) {

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