使用 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.

推荐答案

Stylish 无法做到这一点，因为 CSS 无法做到这一点.CSS 没有用于 值的(伪)选择器.参见:

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

• W3C 选择器规范
• Mozilla/Firefox 支持的选择器
• 跨浏览器、CSS3 支持表

:empty 选择器只引用子节点，而不是输入值.
[value=""] 确实有效；但仅限于初始状态.这是因为节点的 value attribute(CSS 看到的)与节点的 value property 不同(由用户或 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，或支持用户脚本的任何浏览器(即大多数浏览器，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 (i.e. most browsers, except IE).

在这个jsBin页面.

// ==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屋！