Why in textarea value attribute is different from JS value

Question

Initially I was trying to change the look of a textarea when it was empty with just CSS. I thought this would work, but as you can see when writing something and clicking the button, the values are different. Does anyone know of a solution for doing this width CSS or JS is required? Could that be possible with an input??

var area = document.querySelector("textarea");
var btn = document.querySelector("button");

btn.addEventListener("click", function() {
  var value = area.value;
  var attr_value = area.getAttribute("value");
  alert("value: " + value + "\nattr value: " + attr_value);
});

textarea {
  background: red;
  transition: background 0.5s ease;
}
textarea[value=""] {
  background: gray;
}

<textarea value="Here I am"></textarea>
<br>
<button>Click me!</button>

textarea doesn't have a value attribute - input does - is that what you thought you were doing? — Jaromanda X
– Jaromanda X, Commented Jul 10, 2015 at 10:03
You need to access the property and not the attribute. very different things. Always prefer accessing properties an not attributes, if possible. — vsync
– vsync, Commented Feb 2, 2020 at 23:04

kieranpotts · Accepted Answer · 2015-07-10 10:04:41Z

2

Textarea HTML elements do not have a value attribute. Their value is their inner text content.

Thus, the value property will always fetch the correct input value.

getAttribute("value") will fetch the value of the textarea's value attribute, if you give it one. But since this attribute is non-standard on textarea elements, you ought not to use it, anyway.

:)

edited Jul 10, 2015 at 10:04

answered Jul 10, 2015 at 10:03

kieranpotts

1,63812 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

kieranpotts Over a year ago

Correct. <input> controls DO have value attributes. <select>s do not, but <option> elements can also be given (optional) value attributes.

SK. Over a year ago

<textarea> has value property. Look at developer.mozilla.org/en/docs/Web/API/HTMLTextAreaElement

kieranpotts Over a year ago

Mike, you're mistaking properties for attributes. <textarea> elements, as represented in the DOM by HTMLTextAreaElement instances, have value properties. But <textarea> tags do not have value attributes in their markup.

SK. Over a year ago

Yes you are right. There is not attribute like value from <textarea>. Verified here : w3.org/wiki/HTML/Elements/textarea

kieranpotts Over a year ago

Haaa. You are right. Sorry, Vandervals. There is a difference. So, even on an input control, the value property will fetch the current value, as edited by the user. But getAttribute('value') will get the original DEFAULT value as defined in the markup with the value attribute: value="Default value". So, if an input control is given a default value, then the user changes it, the value property and getAttribute('value') will return different things. Does that make sense? Sorry, wasn't thinking...

|

ciscoheat · Accepted Answer · 2015-07-10 10:19:23Z

0

A solution for your initial question is probably to use a little js snippet, since I couldn't get it to work with :empty either.

http://jsfiddle.net/ciscoheat/hvo3h8vz/

var area = document.querySelector("textarea");

area.addEventListener("input", function() {
  if(area.value) area.classList.add('has-content');
  else area.classList.remove('has-content');
});

answered Jul 10, 2015 at 10:19

ciscoheat

3,9672 gold badges41 silver badges57 bronze badges

Collectives™ on Stack Overflow

Why in textarea value attribute is different from JS value

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related