Jest taka "przypadłość" przeglądarek, że zapamiętują pola typu password. A my chcemy, aby z jakiegoś powodu tak się nie działo. Oczywiście sama zmiana typu pola na tektowe nas nie satysfakcjonuje, bo kolega z lepszym wzrokiem, a być może i sąsiad z lornetką, dojrzy jakie hasło wpisujemy do naszej ukrytej przed światem strony.
Jak się dobrze schować?
Mamy dwie możliwości. Jedna z nich opiera się na właściwości w CSS. Nie jest wspierana na każdej przeglądarce, więc nie rozwiązuje problemu w 100%. Chyba, że strona jest przeznaczona do użytku tylko na jednej przeglądarce i to się nie zmieni. Rozwiązanie działa na Chrome oraz Opera i opiera się o właściwość: -webkit-text-security. Właściwość może przyjąć wartości: none, square, circle, disc. Pierwsza wartość nie zmienia zachowania pola, natomiast trzy pozostałe powodują, że wizualnie zachowuje się jak pole typu password.
<input type="text" placeholder="Hasło"/>
+
input{
width: 200px;
height: 20px;
-webkit-text-security: disc;
}
Drugie rozwiązanie jest równie proste, ale mamy 100% pewność, że zadziała na każdej przeglądarce. Wystarczy, że dla pola INPUT o typie text ustawimy taki font, którego każda litera będzie kropką znaną z pola typu password. (Użyta czcionka nie ma odpowiedników kropek dla polskich znaków).
Jeśli nie wykorzystujemy atrybutu placeholder, to font ustawiamy dla pola na stałe:
<input type="text"/>
+
@font-face {
font-family: 'password';
src: url('dotsfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
input{
width: 200px;
height: 20px;
font-family: password;
}
Jeśli natomiast wykorzystujemy placeholder, to font zmieniamy tylko kiedy podpowiedź nie jest widoczna. Musimy tak zrobić, bo w przeciwieństwie do standardowego pola typu password, placeholder będzie również wyświetlony fontem z kropek. Wykorzystujemy tu pseudoklasę :placeholder-shown.
<input type="text" placeholder="Hasło"/>
+
@font-face {
font-family: 'password';
src: url('dotsfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
input{
width: 200px;
height: 20px;
}
input{
font-family: Arial;
}
/* jeśli placeholder nie jest
pokazywany, czyli kiedy
pole jest wypełnione
*/
input:not(:placeholder-shown){
font-family: password;
}
I jeszcze jedna wariacja. Chcemy pokazywać kropki zamiast wpisanego tekstu, tylko kiedy kursor jest poza polem. Czyli w trakcie wpisywania chcemy widzieć hasło.
<input type="text" placeholder="Hasło"/>
+
@font-face {
font-family: 'password';
src: url('dotsfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
input{
width: 200px;
height: 20px;
}
/* jeśli kursor jest w polu */
input:focus{
font-family: Arial;
}
/* jeśli kursora nie ma w polu
i nie jest pokazany placeholder,
czyli kiedy pole jest wypełnione
*/
input:not(:focus):not(:placeholder-shown){
font-family: password;
}
Następny wpis już nie będzie tak tajny. Zapraszam Cię!
Przydatne linki:
Właściwość -webkit-text-security
Pseudoklasa :placeholder-shown