我可以使用 CSS 选择空文本区域吗？

Question

有没有一种方法可以选择一个文本区域，使得 jQuery 中的 $('#id_of_textarea').val() 将为 ''？我尝试使用 :empty。我看到 CSS 提供了一种选择空输入的方法，因为文本位于 value 属性 ([value=""]) 中。文本区域中的文本是否有属性？

我正在寻找一个可以与 CSS 一起使用的选择器，而不仅仅是 jQuery。

Answer 1

我能想到的最佳解决方案是 CSS 3 解决方法。将字段设置为必填（如果需要，可以在提交时取消设置）。然后你可以使用

textarea:invalid { /* style here... probably want to remove box-shadow and such */ }

Answer 2

这适用于除 Edge 之外的最新浏览器（目前）：

textarea:placeholder-shown {
  /* this should be active only when area is empty and placeholder shown */
}

因此，以 jQuery 为例，您可以选择所有空文本区域：

$('textarea:placeholder-shown').val()

https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown

Answer 3

如果您使用 React，那么这就是解决方案：

textarea:not(:empty) {

 // Apply css here

}

例如，

/* Apply style when textarea contains text */

textarea:not(:empty) {
  border: 6px solid blue;
  padding: 6px;
}

工作演示：
Textarea - 使用 CSS 选择空文本区域

注意：在 React 中完美运行（因为状态更新导致重新绘制），如果使用 Vanilla HTML + CSS 实现，它不会提供相同的响应。

Answer 4

这工作得很好，就像输入一样：

<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">

textarea.authority_body-input:not([data-val=""]):not(:focus) {
    color: red;
}

Answer 5

您可以使用 :empty css 伪类。

请参阅 jsfiddle 中的示例。

在示例中，有一个按钮用于动态地将新的空文本区域添加到 DOM，因此您可以看到新元素也受到伪类的影响。

示例中的代码在 Firefox 5.0、Opera 11.50 和 Chromium 12 中进行了测试。

此外，您还可以看到 :empty 伪类的良好描述 此处。

Answer 6

对于那些使用 AngularJS 的人，您可以在视图中使用 ng-class 向文本区域添加一个类以了解它是否为空。

HTML：

<textarea ng-model="myForm.myTextArea"
          ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>

CSS：

textarea.empty {
    background-color:red;
}
textarea.not_empty {
    background-color:blue;
}

这是一个 jsfiddle。