Wykryj, czy wejście zawiera tekst za pomocą CSS - na stronie, którą odwiedzam i której nie kontroluję?

Czy istnieje sposób na wykrycie, czy dane wejściowe zawierają tekst za pomocą CSS? Próbowałem użyć :emptypseudoklasy i próbowałem użyć [value=""], ale żadna z nich nie działała. Nie mogę znaleźć żadnego rozwiązania tego problemu.

Wyobrażam sobie, że musi to być możliwe, biorąc pod uwagę, że mamy pseudoklasy dla :checkedi :indeterminate, z których oba są czymś podobnym.

Uwaga: robię to dla stylu „Stylowego” , który nie może wykorzystywać JavaScript.

Zwróć również uwagę, że Stylowy jest używany po stronie klienta na stronach, nad którymi użytkownik nie ma kontroli.

Stylowy nie może tego zrobić, ponieważ CSS nie może tego zrobić. CSS nie ma (pseudo) selektorów dla <input>wartości. Widzieć:

• Specyfikacja selektora W3C
• Selektory obsługiwane przez Mozilla / Firefox
• Tabela obsługi CSS3 w różnych przeglądarkach

:emptySelektor odnosi się tylko do węzłów podrzędnych, a nie do wartości wejściowe.
[value=""] wykonuje pracę; ale tylko dla stanu początkowego . To dlatego, że węzeł jest value atrybutem (który widzi CSS) nie jest taka sama jak węzła value własności (zmieniona przez użytkownika lub DOM javascript, jak i złożone formy danych).

Chyba, że dbają tylko o stanie początkowym, ty musi użyć userscript lub skrypt Greasemonkey. Na szczęście nie jest to trudne. Poniższy skrypt będzie działał w przeglądarce Chrome lub Firefox z zainstalowanym Greasemonkey lub Scriptish lub w dowolnej przeglądarce obsługującej skrypty użytkownika (tj. W większości przeglądarek poza IE).

Zobacz demo ograniczeń CSS oraz rozwiązania javascript na tej stronie 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";
}

Jest to możliwe, z typowymi zastrzeżeniami CSS i możliwością modyfikacji kodu HTML. Jeśli dodasz requiredatrybut do elementu, element będzie pasował :invalidlub w :validzależności od tego, czy wartość kontrolki jest pusta, czy nie. Jeśli element nie ma valueatrybutu (lub ma value=""), wartość kontrolki jest początkowo pusta i staje się niepusty po wprowadzeniu dowolnego znaku (nawet spacji).

Przykład:

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

Pseudo-klasyfikowane :validi :invalidsą zdefiniowane tylko w dokumentach CSS na poziomie Working Draft, ale obsługa jest dość powszechna w przeglądarkach, z wyjątkiem tego, że w IE jest dostarczana z IE 10.

Jeśli chcesz, aby „puste” zawierały wartości zawierające tylko spacje, możesz dodać atrybut pattern=.*\S.*.

Nie ma (obecnie) selektora CSS do bezpośredniego wykrywania, czy kontrolka wejściowa ma niepustą wartość, więc musimy to zrobić pośrednio, jak opisano powyżej.

Ogólnie rzecz biorąc, selektory CSS odnoszą się do znaczników lub, w niektórych przypadkach, do właściwości elementu ustawionych za pomocą skryptów (JavaScript po stronie klienta), a nie do działań użytkownika. Na przykład :emptydopasowuje element do pustej treści w znaczniku; inputw tym sensie wszystkie elementy są nieuchronnie puste. Selektor [value=""]sprawdza, czy element ma valueatrybut w znaczniku i ma pusty ciąg jako wartość. A :checkedi :indeterminatesą podobne rzeczy. Nie ma na nie wpływu faktyczne działanie użytkownika.

Możesz użyć :placeholder-shownpseudoklasy. Z technicznego punktu widzenia symbol zastępczy jest wymagany, ale zamiast tego można użyć spacji.

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

Zasadniczo wszyscy szukają:

MNIEJ:

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;}
}

Czysty 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;}

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

i

input[value=""]

będzie działać :-)

edytuj: http://jsfiddle.net/XwZR2/

Możesz użyć placeholdersztuczki, jak napisano powyżej bez requiredpola.

Problem requiredpolega na tym, że kiedy coś napisałeś, a następnie skasowałeś - dane wejściowe będą teraz zawsze czerwone jako część specyfikacji HTML5 - wtedy będziesz potrzebować CSS, jak napisano powyżej, aby to naprawić / zastąpić.

Możesz po prostu zrobić coś bez 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;
}

Pióro do kodu: https://codepen.io/arlevi/pen/LBgXjZ

Możesz skorzystać z symbolu zastępczego i użyć:

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

Prosty CSS:

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

Ten kod zastosuje podany CSS podczas ładowania strony, jeśli dane wejściowe są wypełnione.

Styl można zmieniać w input[type=text]zależności od tego, czy dane wejściowe zawierają tekst, określając styl dla symbolu zastępczego. W tym momencie nie jest to oficjalny standard, ale obsługuje szeroką przeglądarkę, chociaż z różnymi prefiksami:

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;
}

Przykład: http://fiddlesalad.com/scss/input-placeholder-css

Używanie JS i CSS: nie pseudoklasy

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

   

Poprawny selektor rade.

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

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

Prosta sztuczka z jQuery i CSS Jak to:

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;
    }

zrób to na części HTML w ten sposób:

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

Wymagany parametr będzie wymagał umieszczenia tekstu w polu wejściowym, aby był poprawny.

Tak! możesz to zrobić za pomocą prostego atrybutu podstawowego z selektorem wartości.

Użyj selektora atrybutu z pustą wartością i zastosuj właściwości input[value='']

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

Właściwie jest na to sposób bez javascript.

Jeśli ustawisz <input>„s requiredselektor true, można sprawdzić, czy jest w nim tekst z CSS :validtagu.

Bibliografia:

MDN Docs
Sztuczki CSS

input {
  background: red;
}

input:valid {
  background: lightgreen;
}

<input type="text" required>

Nie jest to możliwe w przypadku CSS. Aby to zaimplementować, będziesz musiał użyć JavaScript (np $("#input").val() == "".).