有没有办法使用CSS仅定义所有textareas值？ [英] Is there a way to target all textareas with a value using CSS only?

问题描述

我想象这是直接的，但我无法找到任何东西，表明我可以使用CSS来定位非空文本区域的页面。

I imagined this to be straightforward, but I am unable to find anything that indicates I can use CSS to target non-empty textareas on a page.

如果CSS绝对不支持这个，但是即使使用jQuery我找不到一种方法使用选择器，但必须显式检查.val（）。

I'm okay with JS if CSS absolutely does not support this, but even with jQuery I can't find a way to use a selector, but have to explicitly check for a .val().

一些上下文：我有一个可选的textarea扩展焦点，但如果用户决定键入的东西，我不希望它再次收缩，当焦点离开。

推荐答案

$（'textarea：empty'）它，但是我正在处理的文本区域的内容可能会不断变化，在一点是空的和非空的下一个，这仍然需要检查每次用户聚焦进出文本区域。

$('textarea:empty') is a nice way of doing it, but as I am dealing with textareas whose content may constantly change and be empty at one point and non-empty the next, this would still require checking every time the user focuses in and out of the textarea.

我最后向我的textarea添加一个类 .empty ，每次 .focusout 被触发：

I ended up adding a class .empty to my textarea, and checking its value every time .focusout is fired:

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

这种方式我可以保持我的样式表中的样式和 .empty 即使在用户输入了某个内容并决定全部删除之后也可以使用。

This way I can keep the styling in my stylesheets and the rules defined by .empty get used even after the user has typed something and decides to delete it all.

这篇关于有没有办法使用CSS仅定义所有textareas值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！