一尘不染

使用CSS检测输入中是否包含文本-我正在访问的页面上不受控制吗?

css

是否可以通过CSS检测输入中是否包含文本?我试过使用:empty伪类,并且试过使用[value=""],这两种都不起作用。我似乎找不到单个解决方案。

考虑到我们有:checked和和的伪类,我想这一定是有可能的,:indeterminate两者都是相似的。

请注意: 我这样做是为了实现“时尚”风格 ,无法使用JavaScript。

另请注意,在用户无法控制的页面上,客户端使用了时尚样式。


阅读 334

收藏
2020-05-16

共1个答案

一尘不染

时尚 无法做到这一点,因为CSS无法做到这一点。 CSS没有(伪)<input>值选择器。看到:

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

:empty选择仅指子节点,而不是输入值。
[value=""] 确实 有效;但仅适用于 初始 状态。这是因为节点的value 属性 (CSS可以看到)与节点的value
属性 (由用户或DOM javascript更改,并作为表单数据提交)不同。

除非你只关心初始状态, 必须 使用一个userscript或Greasemonkey的脚本。
幸运的是,这并不难。以下脚本将在Chrome或安装了Greasemonkey或Scriptish的Firefox中运行,或在任何支持用户脚本的浏览器(即除IE之外的大多数浏览器)中运行。

此jsBin页面上查看CSS限制的演示以及javascript解决方案。

// ==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";
}
2020-05-16