Pozrite sa do atribútu zástupcu HTML5
Jeden z mojich najobľúbenejších nových kusov v HTML5 je schopnosť pridávať Text zástupného symbolu ľahko. Text zástupného symbolu je šedý text, ktorý nájdete v zadávacom poli, ktorý sa používa na poskytnutie náznaku používateľom o tom, aký vstup sa očakáva v danom poli. Akonáhle používatelia začnú písať v vstup pole zmizne.
V dávnych časoch to bežne robíme pomocou jazyka JavaScript, nasledovne;
V tejto praxi nie je nič zlého, ale HTML5 je jednoduchšie.
HTML5 predstavil nový atribút s logickým názvom; zástupný. Tu je príklad:
Ak ju zobrazujeme na prehliadačoch, vstup by mal teraz mať šedý text, ako je uvedené nižšie;
Niekoľko vecí, ktoré je potrebné poznamenať: podľa špecifikácie, zástupný atribút by nemal byť použitý ako alternatíva k a štítok a taktiež sa odporúča, aby sa tento atribút použil iba vstup typy, ktoré vyžadujú text, napr. text, heslo, Vyhľadávanie, e-mail, textarea a tel.
pridanie zástupný na vstup typy: rádio a checkbox nebude mať žiadny rozdiel.
Zástupný symbol a CSS
Okrem toho je možné aj styling zástupného textu prostredníctvom CSS, ale v čase tohto písania je stále obmedzený len na prehliadače Firefox a Webkit.
Nasledujúci príklad ukazuje, ako zmeniť text zástupného symbolu na zelenú ako v Webkit, tak v Firefoxe;
vstup :: - webkit-input-placeholder farba: zelená; vstup: -moz-placeholder farba: zelená;
Len si však pamätať, že :: - WebKit-input-zástupný a : -Moz-zástupný bude mať vplyv iba na text a nemôže byť napísaný paralelne.
vstup :: - webkit-input-placeholder, vstup: -moz-placeholder farba: zelená;
Tento kód nebude fungovať.
Výber atribútov
CSS3 tiež podporil tento atribút zavedením [Zástupný] selektor atribútov;
vstup [placeholder] border: 1px solid green;
V príklade vyššie vyberáme všetky vstup ktorý má zástupný atribút a zmena ohraničenia na zelenú.
Kompatibilita prehliadača
Táto nová funkcia HTML5 nie je prekvapujúco podporovaná v starých prehliadačoch a v súčasnosti je plne podporovaná iba v: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 a Internet Explorer 10 (ktorý ešte nebol oficiálne prepustený).
Zásobné polyfólie
Napriek tomu, ak potrebujeme zobraziť zástupný symbol v starších prehliadačoch, ale stále ho môžeme používať zástupný atribút, môžeme použiť Polyfills. Existuje veľa Zásobné polyfólie tam, ale v tomto príklade budeme používať PlaceMe.js;
PlaceMe.js, ako môžete vidieť z fragmentu kódu vyššie, závisí od jQuery. Teraz, ak ju budeme zobrazovať napríklad v programe Internet Explorer 9, celý vstup by mal teraz zobraziť text zástupného symbolu.
- Zobraziť demo
- Stiahnuť zdroj
Konečná myšlienka
Zástupný znak HTML5 atribút určite uľahčuje pridanie zástupného symbolu. Teraz je na nás, webových vývojárov a dizajnérov, aby sme si vybrali, ktorú metódu použijeme: JavaScript alebo HTML5.
Ak si myslíte, že používanie softvéru Polyfills a jQuery na podporu starých prehliadačov je nadbytočné, potom je JavaScript pre túto prácu zrejme vhodnejší. Ak však môžete mierne ignorovať staré prehliadače, potom je pravdepodobne lepšie použiť zástupný znak HTML5.
