为什么在textarea的值属性不同于JS的值

Why in textarea value attribute is different from JS value

本文关键字：不同于 JS 的值 属性 textarea 为什么      更新时间：2023-09-26

最初我试图改变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>

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

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

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

:)

对于您最初的问题的解决方案可能是使用一个小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');
});
相关文章：