Why does textArea not update?

Question

I have checked with an alert, my value is "Enter your comment...", but my if statement returns false.

Thank you.

function ClearText(e) {

  //alert(document.getElementById('contactMe').value);
  if (document.getElementById('contactMe').value == 'Enter your comment...') {
    document.getElementById('contactMe').value = "";
  }

}


var x = document.getElementById('contactMe');
x.addEventListener('click', ClearText, false);

<html>

<body>
  <textarea id=contactMe rows=4 cols=40>Enter your comment...</textarea>
  <script src="contactBox.js">
  </script>
</body>

</html>

Possible duplicate of [Adding watermarks to textarea](http://stackoverflow.com/questions/2536221/adding-watermarks-to-textarea) — torvin, Oct 05 '15 at 04:20
I see the script working. After i clicked on the textarea, automatically removed the text "Enter your comment...". Isn't it what you are trying to get? — Xahed Kamal, Oct 05 '15 at 04:20
Yes, Xahed Kamal. I just realized that it does work on site, but in my browser it does not. — CalmlyCoding, Oct 05 '15 at 04:40

score 1 · Answer 1 · answered Oct 05 '15 at 04:24

I see what you are trying to accomplish and you can avoid the javascript all together by using the html attribute placeholder.

Consider the following code.

<html>

<body>
  <textarea id=contactMe rows=4 cols=40 placeholder='Enter your comment...'></textarea>
  <script src="contactBox.js">
  </script>
</body>

</html>

score 0 · Answer 2 · answered Oct 05 '15 at 04:54

You can do it too as follows:

function clearText(field){
 if(field.defaultValue == field.value){
  field.value = "";
 }
 else if(field.value == ""){
  field.value = field.defaultValue;
 }
}

<html>

<body>
  <textarea id=contactMe rows=4 cols=40 onfocus="clearText(this);" onblur="clearText(this);">Enter your comment...</textarea>
</body>

</html>

Vignesh Subramanian · Answer 3 · 2015-10-05T07:03:41.870

-1

You can use the placeholder attribute to do this

<html>

<body>
  <textarea id="contactMe" rows="4" cols="40" placeholder="Enter your comment..."></textarea>
  <script src="contactBox.js">
  </script>
</body>

</html>

Be informed that this is not supported in IE8 and you have to use javascript for that

My favourite plugin to do this is Mathias. Go for it if you need to support IE8. Also you have not used double quotes in your html for attributes (id="contactMe"). (though it will work without it, it is recommended by w3 to use quotes)

If you need a full jQuery solution you can use the below code. Here is the fiddle

var placeholderText = "Enter your comment...";

$(document).on("click","#contactMe",function(e){
 if($(this).val()=="" ||$(this).val() == placeholderText ){
  $(this).val("");
}
});

$(document).on("focusout","#contactMe",function(e){

    if($(this).val()==""){
      $(this).val(placeholderText);
    }

});

$(document).ready(function(){
 $("#contactMe").val(placeholderText);
});

edited Oct 05 '15 at 07:03

answered Oct 05 '15 at 05:00

Vignesh Subramanian

7,161
14
87
150

Double quotes are not required. Additionally, while not customary, unless there is a space, the quotes are not needed at all in [tag:html]. The placeholder part looks familiar from 40 minutes ago too... – Jesse Oct 05 '15 at 05:06
yeah, i have also added jQuery solution which will also support IE8 – Vignesh Subramanian Oct 05 '15 at 05:47
Which double quotes are not required? – Oct 05 '15 at 05:50
i guess he was mentioning the double quotes in id="contactMe" – Vignesh Subramanian Oct 05 '15 at 06:08
@Jesse added refereces to w3 where it recommends usage of single or double quotes – Vignesh Subramanian Oct 05 '15 at 07:04

Why does textArea not update?

3 Answers3