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

Posted 2023-05-07

【中文标题】我可以用 CSS 选择空的文本区域吗？

【英文标题】：Can I select empty textareas with CSS?

【发布时间】：2011-10-27 16:55:45

【问题描述】：

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

我正在寻找一个适用于 CSS 而不仅仅是 jQuery 的选择器。

【参考方案1】：

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

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

【讨论】：

太棒了！也适用于 Safari。和火狐。它是基于标准的，虽然它让我稍微改变了我的逻辑。

聪明。谢谢

【参考方案2】：

这适用于最近的浏览器，除了边缘（目前）：

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

【讨论】：

效果很好！不要忘记将placeholder 属性设置为textarea-元素，否则这不起作用。

【参考方案3】：

这很好用，就像输入一样：

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

【参考方案4】：

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

textarea:not(:empty) 

 // Apply css here

例如，

/* Apply style when textarea contains text */

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

工作演示： Textarea - Select empty textarea using CSS

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

【讨论】：

React 有受控和不受控的组件，所以你的答案是不准确的。不过，这个问题与 React 无关。

【参考方案5】：

您可以使用:empty css 伪类。

查看jsfiddle 中的示例。

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

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

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

【讨论】：

查看其他提出此建议的人的评论。它仅在最初有效，一旦输入就无效。

【参考方案6】：

对于那些使用AngularJS的人，你可以在你的视图中使用ng-class来给你的textarea添加一个类来判断它是否为空。

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。

【讨论】：

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