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")将获取textarea的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值不同

2 个答案: