En titt på HTML5 Placeholder Attribut
En av mina favorit nya bitar i HTML5 är möjligheten att lägga till Placeholder Text lätt. Platshållarteksten är den grå text som du hittar i ett inmatningsfält som används för att ge användarna en aning om vilken ingång som förväntas i det fältet. När användarna börjar skriva i inmatning fältet kommer denna text att försvinna.
I gamla dagar gör vi vanligtvis detta med JavaScript, som följer;
Det finns inget fel med denna övning, men det är lättare på HTML5.
HTML5 introducerade ett nytt attribut med ett logiskt namn; platshållare. Här är ett exempel:
Om vi tittar på det i webbläsaren, ska ingången nu ha den grå texten, som ses nedan.
Några saker som bör noteras: enligt specifikationen, den platshållare Attributet ska inte användas som ett alternativ till a märka och det föreslås också att detta attribut endast ska tillämpas på inmatning typer som kräver text, t.ex.. text, Lösenord, Sök, e-post, textarea och tel.
tillsats platshållare till inmatning typer: radio och checkbox kommer inte att göra någon skillnad.
Placeholder & CSS
Vidare är det också möjligt att ställa in platshållarteksten via CSS, men vid skrivningstillfället är det fortfarande begränsat till endast Firefox och Webkit-webbläsare.
Följande exempel visar hur vi ändrar platshållarteksten till grön både i Webkit och Firefox;
input: - webkit-input-placeholder färg: grön; inmatning: -moz-placeholder färg: grön;
Bara för att komma ihåg det :: - webkit-input-platshållare och : -Moz-platshållare kommer bara att påverka texten och kan inte skrivas parallellt.
ingång :: - webkit-input-placeholder, ingång: -moz-placeholder färg: grön;
Den här koden fungerar inte.
Attributväljare
CSS3 kom också till stöd för detta attribut genom att introducera [Placeholder] attributväljare;
ingång [platshållare] gräns: 1px solid grön;
I exemplet ovan väljer vi alla inmatning som har platshållare ange och ändra gränsen till grön.
Webbläsarkompatibilitet
Den här nya HTML5-funktionen förvånansvärt stöds inte i gamla webbläsare och stöds för närvarande bara fullt ut i: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 och Internet Explorer 10 (som ännu inte har publicerats officiellt).
Placeholder Polyfills
Ändå, om vi behöver visa platshållaren i äldre webbläsare men ändå kunna använda platshållare attribut, vi kan använda Polyfills. Det finns många Placeholder Polyfills där ute men i det här exemplet kommer vi att använda PlaceMe.js;
PlaceMe.js, som du kan se från kodavsnittet ovan, är beroende av jQuery. Nu, om vi tittar på den i, till exempel, Internet Explorer 9 borde alla inmatningar nu visa platshållarteksten.
- Visa demo
- Hämta källa
Slutlig tanke
De HTML5 Placeholder Attribut gör det verkligen lättare att lägga till platshållartekst. Nu är det upp till oss, webbutvecklare och designers att välja vilken metod som ska användas: JavaScript eller HTML5.
Om du anser att det är redundant att använda Polyfills och jQuery för att stödja gamla webbläsare, är JavaScript tydligen lämpligare för jobbet. Men om du kan fredligt ignorera de gamla webbläsarna använder du HTML5 Placeholder förmodligen ett bättre sätt.
