Spójrz na atrybut zastępczy HTML5
Jednym z moich ulubionych nowych elementów w HTML5 jest możliwość dodawania Tekst zastępczy z łatwością. Tekst zastępczy to szary tekst znajdujący się w polu wejściowym, który służy do wskazywania użytkownikom, jakie dane wejściowe są oczekiwane w tym polu. Gdy użytkownicy zaczną wpisywać wkład pole to zniknie.
W dawnych czasach zwykle to robimy z JavaScriptem, następująco;
Nie ma nic złego w tej praktyce, ale łatwiej jest w HTML5.
HTML5 wprowadził nowy atrybut o logicznej nazwie; symbol zastępczy. Oto przykład:
Jeśli przeglądamy 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ą symbol zastępczy atrybut nie powinien być używany jako alternatywa dla etykieta sugeruje się również, aby ten atrybut był stosowany tylko do wkład typy wymagające tekstu, np. tekst, hasło, Szukaj, e-mail, textarea i tel.
Dodawanie symbol zastępczy do wkład typy: radio i pole wyboru nie zrobi żadnej różnicy.
Symbol zastępczy i CSS
Co więcej, stylowanie tekstu zastępczego za pomocą CSS jest również możliwe, ale w chwili pisania tego tekstu nadal jest ono ograniczone tylko do przeglądarek Firefox i Webkit.
Poniższy przykład pokazuje, jak zmienić tekst zastępczy na zielony zarówno w Webkit, jak i Firefox;
input :: - webkit-input-placeholder color: green; input: -moz-placeholder color: green;
Ale pamiętam :: - webkit-input-placeholder i : -moz-placeholder wpłynie tylko na tekst i nie może być zapisany równolegle.
input :: - webkit-input-placeholder, input: -moz-placeholder color: green;
Ten fragment kodu nie zadziała.
Selektor atrybutów
CSS3 również zaczął wspierać ten atrybut, wprowadzając [symbol zastępczy] selektor atrybutu;
input [placeholder] border: 1px solid green;
W powyższym przykładzie wybieramy każdy wkład to ma symbol zastępczy atrybut i zmień granicę na zieloną.
Zgodność przeglądarki
Ta nowa funkcja HTML5 nie jest zaskoczona, że 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 i Internet Explorer 10 (który nie został jeszcze oficjalnie wydany).
Placeholder Polyfills
Niemniej jednak, jeśli musimy wyświetlić symbol zastępczy w starszych przeglądarkach, ale nadal możemy korzystać z symbol zastępczy atrybut, możemy użyć Polyfills. Jest ich dużo Placeholder Polyfills tam, ale w tym przykładzie użyjemy PlaceMe.js;
PlaceMe.js, jak widać z powyższego fragmentu kodu, zależy od jQuery. Teraz, jeśli zobaczymy go na przykład w przeglądarce Internet Explorer 9, wszystkie dane wejściowe powinny teraz wyświetlać tekst zastępczy.
- Wyświetl demo
- Pobierz źródło
Końcowa myśl
The Element zastępczy HTML5 atrybut z pewnością ułatwia dodawanie tekstu zastępczego. Teraz to my, programiści i projektanci, musimy wybrać, którą metodę zastosować: JavaScript lub HTML5.
Jeśli uważasz, że używanie Polyfills i jQuery do obsługi starych przeglądarek jest zbędne, JavaScript jest najwyraźniej bardziej odpowiedni do tego zadania. Ale jeśli możesz spokojnie zignorować stare przeglądarki, to użycie zastępczego HTML5 jest prawdopodobnie lepszym sposobem.
