Question

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

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

Answer 1

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

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()

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

Answer 4

您可以使用:empty css伪类。

请参阅jsfiddle中的示例。

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

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

此外，您可以看到：空伪类here的良好描述。

Answer 5

对于使用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。

我可以用CSS选择空的textareas吗？

5 个答案: