Ermitteln Sie mithilfe von CSS, ob eine Eingabe Text enthält - auf einer Seite, die ich besuche und nicht kontrolliere?

Gibt es eine Möglichkeit zu erkennen, ob eine Eingabe Text über CSS enthält oder nicht? Ich habe versucht, die :emptyPseudoklasse zu verwenden, und ich habe versucht [value=""], beide zu verwenden. Ich kann keine einzige Lösung dafür finden.

Ich stelle mir vor, dass dies möglich sein muss, wenn man bedenkt, dass wir Pseudoklassen für :checkedund haben :indeterminate, die beide ähnlich sind.

Bitte beachten Sie: Ich mache dies für einen "stilvollen" Stil , der kein JavaScript verwenden kann.

Beachten Sie auch, dass Stylish clientseitig auf Seiten verwendet wird, die der Benutzer nicht kontrolliert.

Stylish kann dies nicht, da CSS dies nicht kann. CSS hat keine (Pseudo-) Selektoren für <input>Werte. Sehen:

• Die W3C-Auswahlspezifikation
• Mozilla / Firefox unterstützt Selektoren
• Browserübergreifende CSS3-Supporttabelle

Der :emptySelektor bezieht sich nur auf untergeordnete Knoten, nicht auf Eingabewerte.
[value=""] funktioniert ; aber nur für den Ausgangszustand . Dies liegt daran, dass das value Attribut eines Knotens (das CSS sieht) nicht mit der value Eigenschaft des Knotens übereinstimmt (vom Benutzer oder DOM-Javascript geändert und als Formulardaten übermittelt).

Sofern Sie sich nicht nur um den Anfangszustand kümmern, müssen Sie ein Benutzer- oder Greasemonkey-Skript verwenden. Zum Glück ist das nicht schwer. Das folgende Skript funktioniert in Chrome oder Firefox mit installiertem Greasemonkey oder Scriptish oder in jedem Browser, der Benutzerskripte unterstützt (dh die meisten Browser außer IE).

Eine Demo der Grenzen von CSS und der Javascript-Lösung finden Sie auf dieser jsBin-Seite .

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

Es ist möglich, mit den üblichen CSS-Einschränkungen und wenn der HTML-Code geändert werden kann. Wenn Sie das requiredAttribut zum Element hinzufügen , stimmt das Element überein :invalidoder :validhängt davon ab, ob der Wert des Steuerelements leer ist oder nicht. Wenn das Element kein valueAttribut hat (oder hat value=""), ist der Wert des Steuerelements anfangs leer und wird nicht leer, wenn ein Zeichen (sogar ein Leerzeichen) eingegeben wird.

Beispiel:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

Die pseudoklassifizierten :validund:invalid werden nur in CSS-Dokumenten auf Working Draft-Ebene definiert, aber die Unterstützung ist in Browsern ziemlich weit verbreitet, außer dass sie im IE mit IE 10 geliefert wurde.

Wenn Sie leere Werte einschließen möchten, die nur aus Leerzeichen bestehen, können Sie das Attribut hinzufügen pattern=.*\S.*.

Es gibt (derzeit) keinen CSS-Selektor, mit dem direkt erkannt werden kann, ob ein Eingabesteuerelement einen nicht leeren Wert hat. Daher müssen wir dies indirekt tun, wie oben beschrieben.

Im Allgemeinen beziehen sich CSS-Selektoren auf Markups oder in einigen Fällen auf Elementeigenschaften, die mit Skripten (clientseitiges JavaScript) festgelegt wurden, und nicht auf Benutzeraktionen. Entspricht beispielsweise einem :emptyElement mit leerem Inhalt im Markup. Alle inputElemente sind in diesem Sinne unvermeidlich leer. Der Selektor [value=""]testet, ob das Element das valueAttribut im Markup hat und die leere Zeichenfolge als Wert hat. Und :checkedund :indeterminatesind ähnliche Dinge. Sie werden von tatsächlichen Benutzereingaben nicht beeinflusst.

Sie können die :placeholder-shownPseudoklasse verwenden. Technisch ist ein Platzhalter erforderlich, Sie können jedoch stattdessen ein Leerzeichen verwenden.

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

<input onkeyup="this.setAttribute('value', this.value);" />

und

input[value=""]

wird funktionieren :-)

bearbeiten: http://jsfiddle.net/XwZR2/

Grundsätzlich suchen alle:

WENIGER:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

Reines CSS:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

Sie können den oben beschriebenen placeholderTrick ohne verwendenrequired Feld verwenden.

Das Problem mit required ist, dass Sie, wenn Sie etwas geschrieben und dann gelöscht haben - die Eingabe ist jetzt als Teil der HTML5-Spezifikation immer rot -, dann ein CSS wie oben beschrieben benötigen, um es zu korrigieren / zu überschreiben.

Sie können einfach etwas ohne tun required

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

Codestift: https://codepen.io/arlevi/pen/LBgXjZ

Einfache CSS:

input[value]:not([value=""])

Dieser Code wendet das angegebene CSS beim Laden der Seite an, wenn die Eingabe gefüllt ist.

Sie können den Stil input[type=text]unterschiedlich gestalten, je nachdem, ob die Eingabe Text enthält oder nicht, indem Sie den Platzhalter formatieren. Dies ist derzeit kein offizieller Standard, bietet jedoch umfassende Browserunterstützung, jedoch mit unterschiedlichen Präfixen:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

Beispiel: http://fiddlesalad.com/scss/input-placeholder-css

Verwenden von JS und CSS: keine Pseudoklasse

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }

<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   

Der gültige Selektor erledigt den Trick.

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

Sie können den Platzhalter nutzen und verwenden:

input:not(:placeholder-shown) {
  border: 1px solid red;
}

Einfacher Trick mit jQuery und CSS So:

JQuery:

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS:

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }

Machen Sie es im HTML-Teil wie folgt:

<input type="text" name="Example" placeholder="Example" required/>

Für den erforderlichen Parameter muss Text im Eingabefeld vorhanden sein, damit er gültig ist.

Ja! Sie können dies mit einem einfachen Basisattribut mit Wertauswahl tun.

Verwenden Sie die Attributauswahl mit leerem Wert und wenden Sie Eigenschaften an input[value='']

input[value=''] {
    background: red;
}

Dies ist mit CSS nicht möglich. Um dies zu implementieren, müssen Sie JavaScript (z $("#input").val() == "". B. ) verwenden.