jquery - 有没有办法仅使用 CSS 来定位具有值的所有文本区域？

Question

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

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

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

score 4 · Accepted Answer

标记方面，:empty选择器应该允许您选择绝对没有内容的文本区域，甚至没有空格或换行符。相反:not(:empty)应该让您选择非空文本区域。

CSS 中的选择器大部分是静态的，这意味着它们不考虑动态变化，例如在页面加载后编辑文本区域的内容。此外，像这样的选择器:empty并没有真正考虑到文本区域的值，因为它通常检查内容节点的存在（或不存在），所以我怀疑它不能很好地处理表单。

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

score 1 · Accepted Answer

怎么用.filter()？

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

score 1 · Accepted Answer

看看:invalid & :validCSS3 伪类：

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

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

score 1 · Accepted Answer

$('textarea:empty')是一种很好的方法，但是当我正在处理其内容可能不断变化并且在某一点为空而下一个非空的文本区域时，这仍然需要在用户每次关注和离开文本区域时进行检查。

我最终.empty在我的文本区域中添加了一个类，并在每次.focusout触发时检查它的值：

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

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

score 1 · Accepted Answer

是的，你可以在 jQuery 中做到这一点：

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

5 回答 5