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

183

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.

JacobTheDev
quelle
Ich bin mir nicht sicher, wie ich das mit CSS machen soll (das sowieso nicht im laufenden Betrieb aktualisiert wird). Dies ist jedoch mit JavaScript einfach.
Ralph.m
Ich glaube nicht, dass ich JavaScript verwenden kann. Ich arbeite an einem "stilvollen" Stil. Ziemlich sicher, dass es komplett mit CSS gemacht werden muss. Wenn es nicht aktualisiert wird, wenn der Benutzer Text eingibt, ist dies wahrscheinlich eine Zeitverschwendung. Daran habe ich nicht gedacht. Hmm. Zumindest ist dies nicht kritisch für den Stil, es ist nur eine nette Sache, die ich hinzufügen wollte.
JacobTheDev
2
Mögliches Duplikat von : not (: empty) CSS-Selektor funktioniert nicht?
Danny Beckett

Antworten:

64

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

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";
}
Brock Adams
quelle
Ich werde mich um dieses Userscript kümmern. Vielen Dank.
JacobTheDev
@ MartinGottweis, nicht im Fall des OP nicht. Dies ist eine [stilvolle] Frage.
Brock Adams
1
@BrockAdams, op sagt, dass es kein Javascript verwenden kann, daher ist die Option: valid ein guter Weg. Vermisse ich etwas
Martin Gottweis
1
@MartinGottweis, die :validerfordert Option , um die Seite Umschreiben - das ist etwas, das OP mit stilvollem nicht tun können , und dass keiner der anderen Antworten zeigt überhaupt in einem Browser - Kontext. Der Benutzer hat keine Kontrolle über die Seite, die er besucht.
Brock Adams
263

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.

Jukka K. Korpela
quelle
7
Dies ist genau dann eine großartige Lösung, wenn jede Eingabe erforderlich ist. Wenn nicht, stoßen Sie auf eine Situation, in der Sie ein leeres, aber gültiges Eingabefeld haben, das vom ungültigen Stil nicht betroffen ist . JS ist wahrscheinlich der Gewinner für diese Lösung
AdamSchuld
6
Das ist schmutzig, aber wunderbar klug. Nicht eine Lösung für die Frage, aber es hat sicher den Trick für mich
Jan
1
Schmutzige Lösung. Beachten Sie, dass dies Probleme mit der automatischen Vervollständigung in Chrome verursachen kann, wenn Sie versuchen, eine Etikettenanzeigelogik basierend auf diesem ODER hinzuzufügen, wenn eine Eingabe tatsächlich nicht erforderlich ist und das Formular eine Validierung basierend darauf hat
Artjom Kurapov
1
Semantisch ist das falsch. Wie in früheren Kommentaren erwähnt, können einige Eingaben optional sein, und das requiredAttribut kann das Senden von Formularen verhindern.
Zhenming
1
novalidateAttribut für <form>Element hinzugefügt , damit Sie sich keine Sorgen über die rote Anzeige machen müssen, wenn das Feld nach einmaligem <form ... novalidate> <input ... required /> </form>
Füllen
226

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

ngryman
quelle
10
Dies wird von IE oder Firefox leider überhaupt nicht unterstützt. Quelle: caniuse.com/#feat=css-placeholder-shown
Sean Dawson
2
Tolle Antwort. Die Browserunterstützung ist zum Kotzen, aber wenn eine Polyfüllung herauskommt, :placeholder-shownsollte dies die akzeptierte Antwort sein. Die requiredMethode berücksichtigt keine Randfälle. Es ist zu beachten, dass Sie ein Leerzeichen an einen Platzhalter übergeben können und diese Methode weiterhin funktioniert. Ein großes Lob.
Corysimmons
5
Der andere Nachteil dabei ist, dass Sie anscheinend tatsächlich einen Platzhalter benötigen. Mit anderen Worten, input:not(:placeholder-shown)wird immer übereinstimmen, <input/>auch wenn es keinen Wert gibt.
Redbmk
5
Für mich funktioniert es in Chrome, Firefox und Safari. Nicht in IE11.
J0ANMM
1
@redbmk als corysimmons erwähnt, Es sollte beachtet werden, dass Sie ein Leerzeichen an einen Platzhalter übergeben können und diese Methode weiterhin funktioniert.
Naeem Baghi
32
<input onkeyup="this.setAttribute('value', this.value);" />

und

input[value=""]

wird funktionieren :-)

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

Tom D.
quelle
23
Ist das CSS? Es sieht aus wie HTML und Javascript (aber ich könnte mich irren).
JWW
Brook Adams schrieb: [value = ""] funktioniert; aber nur für den Ausgangszustand. Dies liegt daran, dass das Wertattribut eines Knotens (das CSS sieht) nicht mit der Werteigenschaft des Knotens übereinstimmt (vom Benutzer oder DOM-Javascript geändert und als Formulardaten übermittelt). -> Die Magie ist, das Wertattribut
Tom D.
2
@ JánosWeisz nein wird es nicht. Dieser Handler wird festgelegt, bevor ein Skript dieses Element bearbeiten kann, und er kann mit dem mit addEventListener hinzugefügten Handler zusammenarbeiten.
Dinoboff
1
Offensichtlich kümmert sich onkeyup nur um die Tastatureingabe. Vergessen Sie jedoch nicht, dass Sie mit der Maus Text in ein Eingabefeld einfügen können. Probieren Sie es aus: Kopieren Sie Text in Ihre Zwischenablage, klicken Sie mit der rechten Maustaste auf die Eingabe und klicken Sie auf Einfügen. Beobachten Sie, wie das CSS NICHT funktioniert. Gleiches gilt für das Ziehen und Ablegen von Text in das Eingabefeld mit der Maus.
Beluga
4
input[value]:not([value=""])- ist besser. Dank an alle. codepen.io/iegik/pen/ObZpqo
iegik
29

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;}
Fábio ZC
quelle
1
Sie haben eindeutig nur die Arbeitslösung verwendet und Sie haben 0 Up-Votes WaT?
ProNOOB
5
Tolle Antwort. Die: Platzhalter-angezeigte Pseudoklasse funktioniert jedoch nicht in IE oder Edge, sodass es sich nicht um eine vollständige Lösung handelt. Es ist verdammt nahe und es bringt mich dazu, Edge zu ermorden, weil ich es nicht unterstütze. IE könnte ich akzeptieren, aber Edge? Komm schon Microsoft!
Aaron Martin-Colby
2
Es ist keine reine CSS-Lösung, wenn Sie Ihrem HTML "
user
Vielen Dank, mein Herr, ich hoffe aufrichtig, dass dies höher geht, da dies meiner Meinung nach die meisten Menschen wirklich wollen.
sivi911
18

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

Ricky Levi
quelle
1
Dieser Ansatz passte perfekt zu meinem Anwendungsfall. Ich hatte Suchfilter, die ohnehin Platzhalter hatten, und ich wollte, dass der Rand des Eingabefelds hervorgehoben wird, wenn ein Wert vorhanden ist.
Stephen Tuttlebee
7

Einfache CSS:

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

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

Breno Teixeira
quelle
9
Dies funktioniert nur beim Laden der Seite. Keine dynamische Eingabe eines Werts.
Ben Racicot
Das Problem beim Laden der Seite sollte für diese Antwort ausdrücklich angegeben werden.
Bryce Snyder
6

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

vbraun
quelle
Zu Ihrer Information, dies formatiert den Platzhalter zuverlässig, aber nur den Platzhalter selbst. Dies gibt Ihnen die Illusion, die Textfarbe zu ändern, aber das ist bereits der Fall, standardmäßig nur bei Grau und Schwarz.
John Weisz
Alles von CSS ist eine billige Illusion, man ändert nur das Aussehen, ohne den tatsächlichen Inhalt zu beeinflussen :-)
vbraun
Genau das brauchte ich. Ich habe verlangt, dass die Eingabe Stile ändert, wenn sie Text enthält, da sich das Design für den Platzhalter vom Eingabestil unterscheidet. Perfekt!
Christopher Marshall
Dies funktioniert für Hintergründe, aber nicht für Ränder. Ich habe mich aber nicht zu sehr mit dem Versuch beschäftigt, die Grenze zu ändern.
Majinnaibu
5

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

   

Pavlo Kozachuk
quelle
3

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
}
Niels Steenbeek
quelle
3

Sie können den Platzhalter nutzen und verwenden:

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

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;
    }
Bren1818
quelle
1

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.

Xedret
quelle
Dies hilft nicht zu erkennen, ob die Eingabe Text mit CSS enthält, was die Frage war.
Jukka K. Korpela
Entschuldigung, es hilft tatsächlich ... Es ermöglicht die Verwendung von Pseudoklassen, wie in meiner Antwort erläutert.
Jukka K. Korpela
1
Dies ist eine stilvolle Frage - was bedeutet, dass das OP die Zielseite nicht steuern oder ändern kann. Er sieht die Seite nur clientseitig.
Brock Adams
3
Dies war super hilfreich, hier ist ein Beispiel dafür, wovon Xedret spricht: codepen.io/tolmark12/pen/LsBvf
tolmark
****** <Eingabe erforderlich> && Eingabe: gültig {...} ******
FremyCompany
0

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;
}
Hidayt Rahman
quelle
-6

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

Logan
quelle
2
Ich weiß, wie das geht, ich muss es mit CSS machen. Bitte lesen Sie die Kommentare zum Originalbeitrag. Meines Wissens nach baue ich einen "stilvollen" Stil, der kein JavaScript verwenden kann.
JacobTheDev