Podívejte se do HTML5 Placeholder Attribute
Jeden z mých oblíbených nových kousků v HTML5 je schopnost přidat Zástupný text snadno. Zástupný text je šedý text, který najdete ve vstupním poli, které slouží k zobrazení nápovědy uživatelům na tom, jaký vstup se očekává v tomto poli. Jakmile uživatelé začnou psát vstup Tento text zmizí.
Ve starých časech to běžně děláme s JavaScriptem, jak následuje;
Na této praxi není nic špatného, ale na HTML5 je to jednodušší.
HTML5 zavedl nový atribut s logickým názvem; zástupný symbol. Zde je příklad:
Pokud si ho prohlížíme v prohlížeči, vstup by měl mít nyní šedý text, jak je vidět níže;
Několik věcí, které je třeba poznamenat: podle specifikace, zástupný symbol atribut by neměl být používán jako alternativa k označení a také se navrhuje, aby byl tento atribut aplikován pouze na vstup typy, které vyžadují text, např. text, Heslo, Vyhledávání, e-mailem, textarea a tel.
Přidání zástupný symbol na vstup typy: rádio a zaškrtávací políčko nebude žádný rozdíl.
Zástupný symbol a CSS
Kromě toho je také možné vytvořit styl zástupného textu pomocí CSS, ale v době psaní tohoto článku je stále omezen pouze na prohlížeče Firefox a Webkit.
Následující příklad ukazuje, jak změníme zástupný text na zelenou v aplikaci Webkit a Firefox;
input :: - webkit-input-placeholder barva: zelená; input: -moz-placeholder color: green;
Jen aby si to vzpomněl :: - webkit-input-placeholder a : -moz-placeholder ovlivní pouze text a nemůže být zapsán paralelně.
input :: - webkit-input-placeholder, input: -moz-placeholder barva: zelená;
Tento kód nebude fungovat.
Výběr atributu
CSS3 také tento atribut podpořil zavedením [zástupný symbol] volič atributů;
input [placeholder] border: 1px plná zelená;
Ve výše uvedeném příkladu vybereme každý vstup který má zástupný symbol a změňte ohraničení na zelenou.
Kompatibilita prohlížeče
Tato nová funkce HTML5 není ve starých prohlížečích podporována a je v současné době plně podporována pouze v následujících jazycích: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 a Internet Explorer 10 (které ještě nebylo oficiálně vydáno).
Zástupný symbol Polyfills
Nicméně, pokud potřebujeme zobrazovat zástupný symbol ve starších prohlížečích, ale stále můžeme používat zástupný symbol můžeme použít Polyfills. Existuje spousta Zástupný symbol Polyfills tam ale v tomto příkladu budeme používat PlaceMe.js;
PlaceMe.js, jak můžete vidět z výše uvedeného kódu, závisí na jQuery. Pokud je nyní zobrazíme například v aplikaci Internet Explorer 9, všechny vstupy by nyní měly zobrazovat zástupný text.
- Zobrazit ukázku
- Stáhněte si zdroj
Závěrečná myšlenka
HTML5 Zástupný symbol atribut jistě usnadňuje přidávání zástupného textu. Nyní je na nás, webových vývojářích a designérech, aby si vybrali, kterou metodu použít: JavaScript nebo HTML5.
Pokud se domníváte, že použití Polyfills a jQuery na podporu starých prohlížečů je redundantní, pak je JavaScript pro tuto práci zřejmě vhodnější. Ale pokud můžete klidně ignorovat staré prohlížeče, pak je použití HTML5 Placeholder pravděpodobně lepší cestou.
