为什么 textarea 中的值属性与 JS 值不同

Question

最初我试图改变 textarea 的外观，当时它只有 CSS 是空的。我认为这会起作用，但正如您在编写内容并单击按钮时所看到的，值是不同的。有谁知道需要此宽度 CSS 或 JS 的解决方案？ 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>

Answer 1

Textarea HTML 元素没有 value 属性。它们的值是它们的内部文本内容。

因此，value 属性将始终获取正确的输入值。

getAttribute("value") 将获取文本区域的 value 属性的值，如果你给它一个。但是由于这个属性在 textarea 元素上是非标准的，无论如何你都不应该使用它。

:)

Answer 2

您最初的问题的解决方案可能是使用一些 js 片段，因为我也无法让它与 :empty 一起工作。

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

为什么 textarea 中的值属性与 JS 值不同

Why in textarea value attribute is different from JS value

javascript

css

textarea