仅将样式应用于空输入/文本区域答案

【问题标题】：apply styles to empty input/textarea only仅将样式应用于空输入/文本区域
【发布时间】：2014-12-21 14:36:59
【问题描述】：

我想知道是否可以仅将样式应用于空文本区域。作为一个最小的例子，我想要一个 cmets 框，当用户点击它时会展开 (:focus)，但在用户输入文本时会保持展开状态，但当框为空时会重新折叠。

我已经尝试过:empty，但这不适用于输入/文本区域（仅限 DOM 元素）。

#comments {
  width: 150px;
  height: 30px;
  font-family: sans-serif;
  border-radius: 5px;
  outline:none;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

#comments:not(:empty),
#comments:focus {
  width: 250px;
  height:100px;
  border-radius: 10px;
}

&lt;textarea type="text" id="comments" placeholder="Place a comment"&gt;&lt;/textarea&gt;

当用户在其中输入内容时，有什么方法可以使输入保持较大？

【问题讨论】：

我担心您将不得不为此使用 javascript：stackoverflow.com/a/3617050/3244925 - 也：stackoverflow.com/a/8639309/3244925
@web-tiki 最好不要。不过，我不必支持旧版浏览器。
您可以将 textarea 设为required，然后使用invalid/valid 选项，但这会产生其他不良影响。否则，JS 是最好的选择。 Here 是使用有效/无效选项的示例小提琴。但请不要使用它:)
@Joeytje50：刚刚遇到this mate。似乎是一个足够接近的副本，因此没有添加答案。副作用是您可能必须在提交时重置required 设置。否则，可能会导致错误。
This 是另一个类似的问题。

标签： html css forms

【解决方案1】：

据我所知，:empty 仍然是一个工作草案，您使用的特定浏览器可能不支持。

一种快速的 JavaScript 解决方案是根据 textarea 是否具有值来添加/删除 HTML 类。

.empty{/*styles go here*/}

还有你的 JavaScript：

textareaElement.addEventListener('input',function(){
    if(this.value && this.classList.contains("empty")) this.classList.remove("empty");
    else this.classList.add("empty");
},false);

有关 Element.classList 的更多信息，请访问 MDN。

【讨论】：