Czy istnieje sposób na wykrycie, czy dane wejściowe zawierają tekst za pomocą CSS? Próbowałem użyć :empty
pseudoklasy 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 :checked
i :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.
Odpowiedzi:
Stylowy nie może tego zrobić, ponieważ CSS nie może tego zrobić. CSS nie ma (pseudo) selektorów dla
<input>
wartości. Widzieć::empty
Selektor 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ł jestvalue
atrybutem (który widzi CSS) nie jest taka sama jak węzłavalue
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"; }
źródło
:valid
opcja wymaga przepisania strony - czego OP nie może zrobić ze stylowym i żadna z pozostałych odpowiedzi w ogóle nie pojawia się w kontekście przeglądania. Użytkownik nie ma kontroli nad odwiedzaną stroną.Jest to możliwe, z typowymi zastrzeżeniami CSS i możliwością modyfikacji kodu HTML. Jeśli dodasz
required
atrybut do elementu, element będzie pasował:invalid
lub w:valid
zależności od tego, czy wartość kontrolki jest pusta, czy nie. Jeśli element nie mavalue
atrybutu (lub mavalue=""
), 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
:valid
i:invalid
są 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
:empty
dopasowuje element do pustej treści w znaczniku;input
w tym sensie wszystkie elementy są nieuchronnie puste. Selektor[value=""]
sprawdza, czy element mavalue
atrybut w znaczniku i ma pusty ciąg jako wartość. A:checked
i:indeterminate
są podobne rzeczy. Nie ma na nie wpływu faktyczne działanie użytkownika.źródło
required
atrybut może uniemożliwić przesłanie formularza.novalidate
atrybut na<form>
elemencie, aby nie martwić się o czerwony wyświetlacz, gdy pole jest puste po jednokrotnym wypełnieniu:<form ... novalidate> <input ... required /> </form>
Możesz użyć
:placeholder-shown
pseudoklasy. 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=" " />
źródło
:placeholder-shown
powinno to stać się akceptowaną odpowiedzią.required
Metoda nie uwzględnia przypadków konto pobocznych. Należy zauważyć, że można przekazać spację do symbolu zastępczego i ta metoda będzie nadal działać. Sława.input:not(:placeholder-shown)
zawsze będzie pasować,<input/>
nawet jeśli nie ma wartości.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;}
źródło
<input onkeyup="this.setAttribute('value', this.value);" />
i
input[value=""]
będzie działać :-)
edytuj: http://jsfiddle.net/XwZR2/
źródło
input[value]:not([value=""])
- jest lepiej. Dziękuje za wszystko. codepen.io/iegik/pen/ObZpqoMożesz użyć
placeholder
sztuczki, jak napisano powyżej bezrequired
pola.Problem
required
polega 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
źródło
Możesz skorzystać z symbolu zastępczego i użyć:
input:not(:placeholder-shown) { border: 1px solid red; }
źródło
Prosty CSS:
input[value]:not([value=""])
Ten kod zastosuje podany CSS podczas ładowania strony, jeśli dane wejściowe są wypełnione.
źródło
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
źródło
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="" />
źródło
Poprawny selektor rade.
<input type="text" class="myText" required="required" /> .myText { //default style of input } .myText:valid { //style when input has text }
źródło
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; }
źródło
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.
źródło
Tak! możesz to zrobić za pomocą prostego atrybutu podstawowego z selektorem wartości.
input[value=''] { background: red; }
źródło
Właściwie jest na to sposób bez javascript.
Jeśli ustawisz
<input>
„srequired
selektor true, można sprawdzić, czy jest w nim tekst z CSS:valid
tagu.Bibliografia:
MDN Docs
Sztuczki CSS
input { background: red; } input:valid { background: lightgreen; }
<input type="text" required>
źródło
Nie jest to możliwe w przypadku CSS. Aby to zaimplementować, będziesz musiał użyć JavaScript (np
$("#input").val() == ""
.).źródło