Question

我认为这很简单，但是我无法找到任何表明我可以使用CSS来定位页面上非空文本区域的内容。

如果CSS绝对不支持，我可以使用JS，但即使使用jQuery，我也无法找到使用选择器的方法，但必须明确检查.val（）。< / p>

某些上下文：我有一个可选的textarea，可以扩展焦点，但如果用户决定输入内容，我不希望它在焦点离开时再次收缩。

Answer 1

标记方面，:empty选择器应该允许您选择绝对没有内容的textareas，甚至不包括空白或换行符。相反，:not(:empty)应该让你选择非空的textareas。

CSS中的选择器大部分都是静态的，这意味着它们不会考虑动态更改，例如在页面加载后编辑textarea的内容。此外，像:empty这样的选择器并不能真正考虑textarea的值，因为它一般会检查内容节点的存在（或不存在），因此我怀疑它与表单不匹配。 / p>

如果您需要根据表单字段的值动态应用样式，则每次更新时都需要使用脚本使用.val()或类似内容检查其值。

Answer 2

是的，您可以在jQuery中执行此操作：

$('textarea:not(:empty)').css('color','red');

Answer 3

查看:invalid & :valid CSS3伪类：

<textarea required="required"></textarea>

textarea:invalid{background:red}
textarea:valid{background:blue}

Answer 4

如何使用.filter()？

    $("input").filter(function() { return this.value == ""; }).css('dosomething');

Answer 5

$('textarea:empty')是一种很好的方式，但是当我处理textareas时，其内容可能会不断变化并且在某一时刻变为空并且在下一次非空时，这仍然需要每次用户检查聚焦进出textarea。

我最后在我的textarea中添加了一个类.empty，并在每次.focusout被触发时检查其值：

$('textarea').focusout(function() {
  if ($(this).val() == '') { $(this).addClass('empty'); }
  else { $(this).removeClass('empty'); }
  });

这样我就可以在我的样式表中保留样式，并且.empty定义的规则即使在用户输入内容并决定将其全部删除之后也会被使用。