suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die Seite kann nicht gesteuert werden, aber über CSS wird erkannt, ob die Eingabe Text enthält

<p>Gibt es eine Möglichkeit, über CSS zu erkennen, ob das Eingabefeld Text enthält? Ich habe versucht, die Pseudoklasse <code>:empty</code> und <code>[value=""]</code> zu verwenden. Ich kann anscheinend keine Lösung finden. </p> <p>Ich denke, es muss möglich sein, wenn man bedenkt, dass wir Pseudoklassen wie <code>:checked</code> haben, die ähnliche Dinge sind. </p> <p>Bitte beachten Sie: <strong>Ich mache dies für einen „stilvollen“ Stil</strong> und kann kein JavaScript verwenden. </p> <p>Beachten Sie außerdem, dass Stylish auf Seiten verwendet wird, über die der Benutzer keine Kontrolle hat, also auf der Clientseite. </p>
P粉850680329P粉850680329492 Tage vor563

Antworte allen(2)Ich werde antworten

  • P粉710478990

    P粉7104789902023-08-21 12:14:04

    您可以使用:placeholder-shown伪类。技术上来说,需要一个占位符,但您可以使用一个空格代替。

    input:not(:placeholder-shown) {
      border-color: green;
    }
    
    input:placeholder-shown {
      border-color: red;
    }
    <input placeholder="需要文本" />
    <input placeholder=" " value="这个有效" />
    <input placeholder=" " />

    Antwort
    0
  • P粉415632319

    P粉4156323192023-08-21 09:35:11

    Stylish无法做到这一点,因为CSS无法实现这一点。CSS没有(伪)选择器适用于<input>值。请参阅:

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

    除非您只关心初始状态,必须使用用户脚本或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";
    }
    

    Antwort
    0
  • StornierenAntwort