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

Question

有没有一种方法可以选择一个文本区域，以便在jQuery中 $('#id_of_textarea').val() 返回''？我尝试使用 :empty，但它不起作用。我看到CSS提供了一种选择空输入框的方式，因为文本位于 value 属性中（[value=""]）。是否存在类似的属性选项来选择文本区域中的文本？

我正在寻找适用于CSS和jQuery的选择器。

- Benjamin Atkin

---

我们都期望 textarea:empty 能够正常工作。HTML表单输入的功能平等性令人震惊。 - run_the_race

Answer 1

我能想到的最好解决方案是使用 CSS 3 的技巧。将字段设置为 required（如果需要则在提交时取消设置）。然后你可以使用

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

- LoveAndCoding

---

太棒了！在Safari上也能运行。还有Firefox。它是基于标准的，尽管它让我改变了一点逻辑。 - Benjamin Atkin

聪明。谢谢。 - Arrowcatch

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/zh-CN/docs/Web/CSS/:placeholder-shown

- Luca C.

---

工作得很好！不要忘记将“placeholder”属性设置为“textarea”元素，否则这将无法正常工作。 - Tim

Answer 3

如果您正在使用React，则这是解决方案：

textarea:not(:empty) {

 // Apply css here

}

例如，

例如，

/* Apply style when textarea contains text */

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

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

注意：虽然这在React中可以完美运行（因为状态更新引起的重新绘制），但如果使用原始HTML + CSS实现，则不会提供相同的响应。

- Aadesh

---

React 既有受控组件，也有非受控组件，因此你的答案是不准确的。但无论如何，这个问题并不关乎 React。 - Benjamin Atkin

以上的解决方法都不适用于Firefox，但这个可以！+1 - Odd

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

- ig0r74

Answer 5

您可以使用:empty CSS 伪类。

在 jsfiddle 中查看示例。

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

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

此外，您可以在这里看到对 :empty 伪类的良好描述。

- Diosney

---

看一下另一个建议这个的人的评论。它只在最初起作用，输入后就不再起作用了。 - LoveAndCoding

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。

- PatateKiller

---

根据我的测试，jQuery的.val()反映了当前文本内容，而jQuery的.text()反映了原始HTML标签之间的文本。此外，CSS选择器:empty检查原始HTML标签之间的文本（就像jQuery的.text()一样）。CSS选择器[value=""]似乎根本不起作用。请参见jsfiddle。 - Kjell Rilbe