jednym z moich ulubionych nowych elementów w HTML5 jest możliwość łatwego dodawania tekstu zastępczego. Tekst zastępczy to szary tekst, który znajduje się w polu wprowadzania danych, który służy do podpowiedzi użytkownikom, jakie dane wejściowe są oczekiwane w tym polu. Gdy użytkownicy zaczną wpisywać w polu input, ten tekst zniknie.
w dawnych czasach, zwykle robimy to z JavaScript, w następujący sposób;
nie ma nic złego w tej praktyce, ale jest łatwiejsze w HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Oto przykład:
<input type="text" placeholder="Placeholder Text">
Jeśli wyświetlamy go w przeglądarkach, wejście powinno teraz mieć szary tekst, jak widać poniżej;
kilka rzeczy, które należy zauważyć: zgodnie ze specyfikacją, atrybut placeholder nie powinien być używany jako alternatywa dla label I sugeruje się również, że ten atrybut powinien być stosowany tylko do input typów, które wymagają tekstu, np., text, password, search, email, textarea I tel.
dodanieplaceholder doinput typów:radio Icheckbox nie spowoduje żadnej różnicy.
Placeholder & CSS
ponadto możliwe jest stylizowanie tekstu zastępczego za pomocą CSS, ale w momencie pisania tego tekstu jest nadal ograniczone tylko do przeglądarek Firefox i Webkit.,
poniższy przykład pokazuje, jak zmieniamy tekst zastępczy na zielony zarówno w Webkit, jak i Firefoksie;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
wystarczy pamiętaj jednak, że ::-webkit-input-placeholder I :-moz-placeholder będą miały wpływ tylko na tekst i nie mogą być pisane równolegle.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Ten fragment kodu nie zadziała.,
Selektor atrybutów
CSS3 również przyszedł do obsługi tego atrybutu, wprowadzając selektor atrybutów;
input {border: 1px solid green;}
w powyższym przykładzie wybieramy każdyinputktóry maplaceholder atrybut i zmień obramowanie na zielone.,
Zgodność przeglądarki
nowa funkcja HTML5 nie jest obsługiwana w starych przeglądarkach i jest obecnie w pełni obsługiwana tylko w: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 oraz Internet Explorer 10 (który jeszcze nie został oficjalnie wydany).
Placeholder Polyfills
niemniej jednak, jeśli chcemy wyświetlić Element Zastępczy w starszych przeglądarkach, ale nadal możemy używać atrybutu placeholder, możemy użyć Polyfills., Istnieje wiele pól zastępczych, ale w tym przykładzie użyjemy tego pola.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
PlaceMe.js, jak widać z powyższego fragmentu kodu, jest zależny od jQuery. Teraz, jeśli oglądamy go na przykład w Internet Explorer 9 wszystkie dane wejściowe powinny teraz wyświetlać tekst zastępczy.
- Zobacz Demo
- Pobierz źródło
ostateczna myśl
atrybut zastępczy HTML5 z pewnością ułatwia dodawanie tekstu zastępczego., Teraz do nas, twórców i projektantów stron internetowych, należy wybór metody: JavaScript lub HTML5.
Jeśli uważasz, że używanie Polyfills i jQuery do obsługi starych przeglądarek jest zbędne, to JavaScript jest najwyraźniej bardziej odpowiedni do tego zadania. Ale jeśli możesz spokojnie ignorować stare przeglądarki, to używanie HTML5 Placeholder jest prawdopodobnie lepszym sposobem.