使用CSS检测输入中是否有文本 - 在我正在访问的网页上，并且无法控制？ [英] Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

问题描述

有没有办法通过CSS检测输入是否有文本？我试过使用：empty 伪类，我已经尝试使用 [value =] ，这两个都没有工作。我似乎找不到一个单一的解决方案。

Is there a way to detect whether or not an input has text in it via CSS? I've tried using the :empty pseudo-class, and I've tried using [value=""], neither of which worked. I can't seem to find a single solution to this.

我想这必须是可能的，考虑我们有伪类：checked 和：indeterminate ，两者都是类似的事情。

I imagine this must be possible, considering we have pseudo-classes for :checked, and :indeterminate, both of which are kind of similar thing.

请注意：我为时尚样式执行此操作，无法使用JavaScript。

Please note: I'm doing this for a "Stylish" style, which can't utilize JavaScript.

还要注意，在用户不能控制的页面上，使用了Stylish。客户端。

Also note, that Stylish is used, client-side, on pages that the user does not control.

推荐答案

时尚不能这样做，因为CSS不能这样做。 CSS对于< input> 值没有（伪）选择器。请参阅：

Stylish cannot do this because CSS cannot do this. CSS has no (pseudo) selectors for <input> value(s). See:

• W3C选择器规格


• Mozilla / Firefox支持的选择器


• 跨浏览器，CSS3支持表

• The W3C selector spec
• The Mozilla/Firefox supported selectors
• Cross-browser, CSS3 support table

：empty 选择器仅指子节点，而不是输入值。

[value = ] 工作;但仅用于初始状态。这是因为节点的 value 属性（CSS看到）与节点的值 （由用户或DOM javascript更改，并作为表单数据提交）。

The :empty selector refers only to child nodes, not input values.
[value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).

除非您只关心初始状态 必须使用用户脚本或Greasemonkey脚本。幸运的是，这并不困难。以下脚本将在Chrome或安装了Greasemonkey或Scriptish的Firefox中，或在支持userscripts的任何浏览器（IE大多数浏览器，IE除外）中使用。

Unless you care only about the initial state, you must use a userscript or Greasemonkey script. Fortunately this is not hard. The following script will work in Chrome, or Firefox with Greasemonkey or Scriptish installed, or in any browser that supports userscripts (IE most browsers, except IE).

的CSS限制以及 此jsBin页面 中的javascript解决方案。

See a demo of the limits of CSS plus the javascript solution at this jsBin page.

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

这篇关于使用CSS检测输入中是否有文本 - 在我正在访问的网页上，并且无法控制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！