Potrzebuje dodać klasę css do inputa w zależności od tego czy coś w nim jest czy też nie. Działa to ok, za wyjatkiem autouzupełniania w Chrome, które nie wiem jak się odbywa. Dla firefoxa podziałało po prostu aby po załadowaniu strony, nasłuchiwać value change.
Wie ktoś kiedy chrome robi autozupelnienie i w którym momencie powinno się sprawdzić czy jest coś w tych inputach czy też nie?
0
0
Google podpowiada mi, że istnieje pseudo klasa autofill https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill którą można wykryć takie pole.
Kombinowałbym w taki sposób
const autofillInput = document.querySelector('input:-webkit-autofill, input:autofil');
if (autofillInput) {
autofillInput.classList.add('new-class');
}
0
Xarviel napisał(a):
Google podpowiada mi, że istnieje pseudo klasa
autofillhttps://developer.mozilla.org/en-US/docs/Web/CSS/:autofill którą można wykryć takie pole.Kombinowałbym w taki sposób
const autofillInput = document.querySelector('input:-webkit-autofill, input:autofil'); if (autofillInput) { autofillInput.classList.add('new-class'); }
Selector mi nie działa i to się wydaje dosyć przekombinowane, może z ta psedo klasa będzie lepiej.
Edit:
Samo autofill nie podziała, potrzebowałbym czegoś w stylu autofill-within..
0
ToughCaptcha napisał(a):
Selector mi nie działa
Zrobiłem literówkę w selektorze xDD Z pośpiechu napisałem autofil zamiast autofill, więc pewnie dlatego jest błąd.
Można nawet pokusić się o zrobienie odrębnej metody z try {} catch {} na wypadek błędu jakby jakaś stara przeglądarka tego nie obsługiwała.
function getAutofillElement(selector) {
try {
return document.querySelector(selector + '::autofill');
} catch {
try {
return document.querySelector(selector + ':-webkit-autofill');
} catch {
return null;
}
}
}
console.dir(getAutofillElement('input'));
console.dir(getAutofillElement('textarea'));
console.dir(getAutofillElement('.auth-form .login-input'));
console.dir(getAutofillElement('.auth-form .password-input'));
Jeśli wszystko zadziała i będzie pole z automatyczną wartością to zostanie zwrócone, w przeciwnym wypadku dostaniemy nulla.
Tylko nie mam możliwości przetestowania tego, więc możliwe, że znowu będzie jakaś drobna literówka.
ToughCaptcha napisał(a):
wydaje się dosyć przekombinowane, może z ta psedo klasa będzie lepiej.
https://stackoverflow.com/q/11708092
Przeglądając starsze tematy na stackoverflow można znaleźć bardziej przekombinowane rozwiązania, więc nie jest tak źle.
0
Przykład z ifem jest dla mnie bardziej praktyczny, ten autofill to jest lista tymi wszystkim ewentualnymi inputami, ktore sa automatycznie wypełnione tak?
Ja potrzebuje zmienic odpowiadajacy im label, wiec czy jest cos takiego, w js, ze mamy sobie jedna liste elementow dom i druga mniejsza to da się prosto po kolei sprawdzić czy mniejsza lista zawiera element z większej jeśli tak, to mam indeks labela, który chce zmienić.
0
ToughCaptcha napisał(a):
Przykład z ifem jest dla mnie bardziej praktyczny, ten autofill to jest lista tymi wszystkim ewentualnymi inputami, ktore sa automatycznie wypełnione tak?
To znaczy tak, użyłem metody querySelector, więc pobierze pierwszy pasujący input. Jeśli chcesz pobrać wszystkie to trzeba zamienić na querySelectorAll.
document.querySelector(selector + '::autofill') <--> document.querySelectorAll(selector + '::autofill')
i analogicznie w drugiej linijce
document.querySelector(selector + ':-webkit-autofill') <--> document.querySelectorAll(selector + ':-webkit-autofill')
Jeśli pierwsza wersja była według Ciebie praktyczna to ta druga też powinna być bo możesz z nią zrobić dokładnie to samo
const autofillInput = getAutofillElement('input');
if (autofillInput) {
autofillInput.classList.add('new-class');
}
// tutaj druga wersja jakbyś zamienił na querySelectorAll
const inputs = getAutofillElement('input');
for (let i = 0; i < inputs.length; i++) {
inputs[i].classList.add('new-class');
}
ToughCaptcha napisał(a):
Ja potrzebuje zmienic odpowiadajacy im label, wiec czy jest cos takiego, w js, ze mamy sobie jedna liste elementow dom i druga mniejsza to da się prosto po kolei sprawdzić czy mniejsza lista zawiera element z większej jeśli tak, to mam indeks labela, który chce zmienić.
Najlepiej byłoby jakbyś wrzucił strukturę tego formularza, bo bez kodu to takie zgadywanie w ciemno... Sprawdź te przykłady, które podesłałem.
0
Jednak literówka chyba nie jest problemem.
0
Lipa totalna, kończę na dziś.
0
Problem został rozwiazany tak:
@-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 0px;
}
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 0px;
}
}
.login-input:-webkit-autofill, .password-input:-webkit-autofill, .inputText:-webkit-autofill {
animation: mymove 100ms 1;
WebkitAnimation:mymove 100ms 1;
}
for (let i = 0; i < inputTexts.length; i++) {
inputTexts[i].addEventListener("animationstart", function(){
inputLabels[i].classList.remove('form-view_label-hint');
});
}
Czyli trzeba bylo zrobic fejkowa animacje na inputy, ktore akurat dostaly autocomplete i potem da sie przechwycic ten event przy ladowaniu strony i poprawic ten wyglad, bo oprócz momentu zaladowania strony działało ok.
0
Nie potrzebujesz do tego JS. Sam CSS i HTML wystarczy. Masz na to dwie możliwości:
Metoda 1:
Użyjemy tutaj atrybut required w celu sprawdzenia w CSS czy input jest zwalidowany.
<input type="text" name="email" required />
Teraz CSS. Sprawdzamy przy użyciu pseudo-klasy, czy input jest zwalidowany, czy też nie.
input:invalid {
background: #ff0000;
}
input:valid {
background: #00ff00;
}
Jeśli nie potrzebujesz CSS dla invalid to usuń tę deklarację. Wtedy niezwalidowany input będzie miał swoje bazowe style, a zwalidowany zielone tło.
Plusem tej metody jest to, że możesz wymagać patternu dla inputa. Używając atrybutu pattern, którego wartością będzie jakiś Regex będziesz mógł sprecyzować, kiedy dokładnie :valid ma się aktywować. Przykład poniżej akceptuje tylko cyfry od 1 do 9.
<input type="text" pattern="[1-9]{1}" required />
Jeśli użyjesz tylko required, :valid będzie aktywowane, gdy input nie jest pusty.
Jedynym minusem tej metody może być to, że jeśli input znajduje się w formularzu, nie można go wysłać jeśli jest niezwalidowany. Wtedy pokazuje się komunikat informujący o tym, żeby go wypełnić.
Dowiedz się więcej o Regex:
https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285
Metoda 2:
W tej metodzie posłużymy się atrybutem placeholder. Jest on wymagany. Odpowiada on za tekst zastępczy i inpucie. CSS dostarcza nam pseudoklasę :placeholder-shown, która informuje nas, czy placeholder jest widoczny. A placeholder jest zawsze i tylko widoczny, kiedy input jest pusty. Tak więc modyfikując nieco wcześniejszego inputa robimy tak:
<input type="text" placeholder="Mój tekst zastępczy" />
Teraz nadajemy mu CSS
input:not(:placeholder-shown) {
background: #ff0000;
}
input:placeholder-shown {
background: #00ff00;
}
Jeśli bardzo przeszkadza Ci placeholder, możesz zmienić kolor jego tekstu na transparent.
::placeholder {
color: transparent;
opacity: 0; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: transparent;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: transparent;
}
Dzięki tej metodzie możesz wysyłać formularz z pustymi inputami.
Dodatkowo:
Przykłady na CodePen:
https://codepen.io/zerakot/pen/GRQVMoa
Jak wystylizować automatycznie uzupełnionego inputa:
https://stackoverflow.com/a/14205976/16880863