En titt på HTML5 plassholderegenskap
En av mine favoritt nye brikker i HTML5 er muligheten til å legge til Plassholdertekst Enkelt. Stedholderteksten er den grå teksten du finner i et inntastingsfelt som brukes til å gi brukerne en hint på hvilken inntasting som forventes i det aktuelle feltet. Når brukerne begynner å skrive inn inngang feltet, vil denne teksten forsvinne.
I gamle dager gjør vi det vanligvis med JavaScript, som følger;
Det er ikke noe galt med denne øvelsen, men det er lettere på HTML5.
HTML5 introduserte et nytt attributt med et logisk navn; plassholder. Her er et eksempel:
Hvis vi ser det på nettleserne, bør inngangen nå ha den grå teksten, som vist nedenfor;
Noen ting som bør noteres: i henhold til spesifikasjonen, er plassholder Attributtet skal ikke brukes som et alternativ til a merkelapp og det foreslås også at denne attributtet bare skal brukes på inngang typer som krever tekst, f.eks. tekst, passord, Søke, e-post, textarea og tlf.
legge plassholder til inngang typer: radio og avkrysnings vil ikke gjøre noen forskjell.
Placeholder & CSS
Videre er styling av plassholderteksten gjennom CSS også mulig, men på tidspunktet for denne skrivingen er det fortsatt begrenset til bare Firefox- og Webkit-nettlesere.
Følgende eksempel viser hvordan vi endrer plassholderteksten til grønt både i Webkit og Firefox;
input: - webkit-input-plassholder farge: grønn; inngang: -moz-plassholder farge: grønn;
Bare for å huske skjønt, :: - webkit-inngang-plassholder og : -Moz-plassholder vil bare påvirke teksten og kan ikke skrives parallelt.
input: - webkit-input-plassholder, input: -moz-placeholder color: green;
Dette stykke kode vil ikke fungere.
Egenskapsvelger
CSS3 kom også for å støtte dette attributtet ved å introdusere [Plassholder] attributtvelger;
inngang [plassholder] grense: 1px solid grønn;
I eksemplet ovenfor velger vi hver inngang som har plassholder Tilordne og endre grensen til grønt.
Nettleserkompatibilitet
Denne nye HTML5-funksjonen er overraskende ikke støttet i gamle nettlesere, og støttes for øyeblikket bare fullt ut i: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 og Internet Explorer 10 (som ikke har blitt offisielt utgitt ennå).
Placeholder Polyfills
Likevel, hvis vi trenger å vise plassholderen i eldre nettlesere, men likevel kunne bruke plassholder Attributt, vi kan bruke Polyfills. Det er mange av Placeholder Polyfills der ute, men i dette eksemplet skal vi bruke PlaceMe.js;
The PlaceMe.js, som du kan se fra kodestykket ovenfor, er avhengig av jQuery. Nå, hvis vi ser det på, for eksempel, i Internet Explorer 9, skal alle innspillingene nå vise plassholderteksten.
- Se demo
- Last ned kilde
Endelig tanke
De HTML5 Plassholder Attributt gjør det enklere å legge til plassholdertekst. Nå er det opp til oss, webutviklere og designere, å velge hvilken metode som skal brukes: JavaScript eller HTML5.
Hvis du mener at bruk av Polyfills og jQuery for å støtte gamle nettlesere er overflødig, er JavaScript tilsynelatende bedre egnet for jobben. Men hvis du kan fredelig ignorere de gamle nettleserne, er det sannsynligvis en bedre måte å bruke HTML5 Placeholder.
