jedním z mých oblíbených nových kusů v HTML5 je schopnost snadno přidávat zástupný text. Zástupný text je šedý text, který najdete ve vstupním poli, které se používá k dát tip na uživatele, na jaký vstup se očekává v této oblasti. Jakmile uživatelé začnou psát do pole input, tento text zmizí.
za starých časů to běžně děláme s JavaScriptem následujícím způsobem;
s touto praxí není nic špatného, ale je to jednodušší na HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Zde je příklad:
<input type="text" placeholder="Placeholder Text">
Pokud se podíváme na prohlížeče, vstup by měl nyní mají šedý text, jak je vidět níže;
pár věcí, které by mělo být uvedeno: podle specifikace, placeholder atribut by neměl být používán jako alternativa k label a to je také navrhl, že tento atribut by měl být aplikován pouze na input typy, které vyžadují text, např., text password search email textarea tel.
Přidání placeholder input typy: radio checkbox nebude dělat žádný rozdíl.
zástupný symbol & CSS
kromě toho je možné styling zástupného textu prostřednictvím CSS, ale v době tohoto psaní je stále omezen pouze na prohlížeče Firefox a Webkit.,
následující příklad ukazuje, jak můžeme změnit zástupný text na zelenou jak v Webkit a Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Jen pamatujte však, ::-webkit-input-placeholder :-moz-placeholder bude mít vliv pouze na text a nemůže být napsány paralelně.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
tento kód nebude fungovat.,
Atribut Volič
CSS3 také přišli podpořit tento atribut zavedením atribut voliče;
input {border: 1px solid green;}
V příkladu výše, vybíráme každý input, který má placeholder atribut a změnit ohraničení zelené.,
Prohlížeč Kompatibilita
Tento nový HTML5 funkce není překvapením není podporován ve starých prohlížečích, a je v současné době pouze plně podporováno v: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 a Internet Explorer 10 (který nebyl oficiálně dosud uvolněna).
Zástupný symbol Polyfills
Nicméně, pokud potřebujeme zobrazit zástupný symbol ve starších prohlížečích, ale stále moci používat placeholder atribut, můžeme použít Polyfills., Existuje spousta zástupných Polyfills venku, ale v tomto příkladu budeme používat PlaceMe.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 můžete vidět z fragmentu kódu výše, je závislá na jQuery. Nyní, pokud ji zobrazíme například v aplikaci Internet Explorer 9, by měl veškerý Vstup nyní zobrazit zástupný text.
- zobrazit Demo
- stáhnout zdroj
Závěrečná myšlenka
atribut zástupného symbolu HTML5 rozhodně usnadňuje přidávání zástupného textu., Teď je na nás, webové vývojáře a designéry, aby si vybrat, kterou metodu použít: JavaScript nebo HTML5.
Pokud se domníváte, že použití Polyfills a jQuery pro podporu starých prohlížečů je nadbytečné, pak JavaScript je zjevně vhodnější pro tuto práci. Ale pokud můžete klidně ignorovat staré prohlížeče, pak je použití zástupného symbolu HTML5 pravděpodobně lepší způsob.