A Vaadake HTML5 Placeholder atribuuti
Üks minu lemmikust uude tükki HTML5-s on võime lisada Placeholder Text lihtsalt. Kohatäidiste tekst on hall tekst, mis on sisendväljal, mida kasutatakse vihje andmiseks kasutajatele, millist sisendit selles valdkonnas oodatakse. Kui kasutajad hakkavad sisestama sisend See tekst kaob.
Vanadel aegadel me seda tavaliselt teeme JavaScriptiga, järgnevalt;
Selles praktikas pole midagi valesti, kuid HTML5-l on see lihtsam.
HTML5 tutvustas loogilise nimega uut atribuuti; kohahoidja. Siin on näide:
Kui vaatame seda brauserites, peaks sisendil olema nüüd hall tekst, nagu allpool näha;
Mõned asjad, mida tuleks märkida: vastavalt spetsifikatsioonile kohahoidja atribuuti ei tohiks kasutada alternatiivina a etikett samuti on soovitatav, et seda atribuuti rakendataks ainult sisend tüübid, mis vajavad teksti, nt. teksti, parool, otsing, e-posti teel, tekst ja tel.
Lisamine kohahoidja Euroopa sisend tüübid: raadio ja märkeruut ei muuda midagi.
Placeholder & CSS
Lisaks on võimalik ka kohatäitja teksti CSS kaudu kujundada, kuid selle kirjutamise ajal piirdub see vaid Firefoxi ja Webkiti brauseritega.
Järgnev näide näitab, kuidas me muutame kohatäitjat teksti roheliseks nii Webkitis kui ka Firefoxis;
input :: - webkit-input-placeholder värv: roheline; sisend: -moz-placeholder värv: roheline;
Lihtsalt meelde tuletada :: - webkit-input-placeholder ja : -moz-placeholder mõjutab ainult teksti ja seda ei saa kirjutada paralleelselt.
input :: - webkit-input-placeeholder, sisend: -moz-placeholder color: green;
See kood ei tööta.
Atribuutide valija
CSS3 tuli ka selle omaduse toetamiseks [kohahoidja] atribuudi valija;
sisend [placeholder] border: 1px roheline;
Ülaltoodud näites valime igaüks sisend see on kohahoidja atribuut ja muutke piiri roheliseks.
Brauseri ühilduvus
See uus HTML5-funktsioon ei ole üllatav vanades brauserites ja seda toetab praegu ainult: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 ja Internet Explorer 10 (mida pole veel ametlikult välja antud).
Placeholder Polyfills
Sellegipoolest, kui me peame vanemate brauserite kohatäitjat näitama, kuid siiski saame seda kasutada kohahoidja atribuut, saame kasutada Polyfills'i. Seal on palju Placeholder Polyfills seal, kuid selles näites me kasutame PlaceMe.js;
PlaceMe.js, Nagu näete ülaltoodud koodilõigust, sõltub see jQueryst. Nüüd, kui vaatame seda näiteks Internet Explorer 9-s, peaks nüüd kõik sisendid näitama kohatäitja teksti.
- Kuva demo
- Allalaadimise allikas
Lõplik mõte
The HTML5 Placeholder atribuut muudab kindlasti kohatäitjate teksti lisamise lihtsamaks. Nüüd on meie, veebiarendajate ja disainerite otsustada, millist meetodit kasutada: JavaScript või HTML5.
Kui arvate, et vanade brauserite toetamiseks on Polüfillide ja jQuery kasutamine üleliigne, on JavaScript ilmselt sobivam töö jaoks. Aga kui te saate vanu brausereid rahumeelselt ignoreerida, siis HTML5 Placeholder'i kasutamine on ilmselt parem viis.
