Oglejte si atribut rezervacijskega mesta HTML5
Ena od mojih najljubših novih kosov v HTML5 je možnost dodajanja Besedilo rezerviranega mesta enostavno. Besedilo ograde je sivo besedilo, ki ga najdete v polju za vnos, ki uporabnikom daje namig o tem, kaj se pričakuje na tem polju. Ko uporabniki začnejo tipkati v vnos bo to besedilo izginilo.
V starih časih to običajno počnemo s JavaScriptom, kot sledi;
S to prakso ni nič narobe, vendar je lažje pri HTML5.
HTML5 je uvedel nov atribut z logičnim imenom; ogrado. Tukaj je primer:
Če si jo ogledamo v brskalnikih, mora imeti vnos zdaj sivo besedilo, kot je prikazano spodaj;
Nekaj stvari, ki jih je treba upoštevati: v skladu s specifikacijo, ogrado atribut se ne sme uporabljati kot alternativa a etiketi prav tako se predlaga, da se ta atribut uporabi le za vnos vrste, ki zahtevajo besedilo, npr. besedilo, geslo, Iskanje, E-naslov, textarea in tel.
Dodajanje ogrado do vnos vrste: radio in potrditveno polje ne bo nič spremenilo.
Placeholder & CSS
Poleg tega je možno tudi styling besedila rezervacijskega mesta prek CSS, vendar je v času tega pisanja še vedno omejeno le na brskalnike Firefox in Webkit.
Naslednji primer prikazuje, kako spreminjamo besedilo ograde v zeleno tako v Webkit kot tudi v Firefoxu;
input :: - webkit-input-placeholder barva: zelena; input: -moz-placeholder barva: zelena;
Samo, da se spomnim :: - webkit-input-placeholder in : -moz-placeholder bo vplivalo samo na besedilo in ga ni mogoče zapisati vzporedno.
input :: - webkit-input-placeholder, vhod: -moz-placeholder color: green;
Ta del kode ne bo deloval.
Izbirnik atributov
CSS3 je podprl tudi ta atribut z uvedbo [ograda] izbirnik lastnosti;
input [placeholder] border: 1px solid green;
V zgornjem primeru izberemo vsakega vnos ki ima ogrado in spremenite mejo na zeleno.
Združljivost brskalnika
Ta nova funkcija HTML5 ni presenetljivo podprta v starih brskalnikih in je trenutno v celoti podprta v: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 in Internet Explorer 10 (ki še ni bila uradno objavljena).
Placeholder Polyfills
Kljub temu, če moramo prikazati ogrado v starejših brskalnikih, vendar še vedno lahko uporabljamo ogrado atribut, lahko uporabimo Polyfill. Obstaja veliko Placeholder Polyfills tam zunaj, toda v tem primeru bomo uporabili PlaceMe.js;
PlaceMe.js, Kot lahko vidite v zgornjem odlomku kode, je ta odvisna od jQuery. Zdaj, če si jo ogledamo, na primer v Internet Explorerju 9, morajo vsi vnosi zdaj prikazati besedilo o ogradi.
- Prikaži predstavitev
- Prenesi vir
Končna misel
The HTML5 Placeholder atribut zagotovo olajša dodajanje besedila ograd. Zdaj je odvisno od nas, spletnih razvijalcev in oblikovalcev, da izberemo, katero metodo bomo uporabili: JavaScript ali HTML5.
Če menite, da je uporaba Polyfills in jQuery za podporo starim brskalnikom odveč, potem je JavaScript očitno bolj primeren za to opravilo. Ampak, če lahko mirno prezreti stare brskalnike, potem je uporaba HTML5 Placeholder verjetno boljši način.
