Et kig på HTML5 Placeholder Attribut
Et af mine yndlings nye stykker i HTML5 er evnen til at tilføje Stedholdertekst let. Stedholderteksten er den grå tekst, du finder i et indtastningsfelt, der bruges til at give brugerne et tip om, hvilken indgang der forventes i dette felt. Når brugerne begynder at skrive i input feltet, vil denne tekst forsvinde.
I gamle dage gør vi det generelt med JavaScript, som følger;
Der er ikke noget galt med denne praksis, men det er lettere på HTML5.
HTML5 introducerede en ny attribut med et logisk navn; pladsholder. Her er et eksempel:
Hvis vi ser det på browserne, skal indtastningen nu have den grå tekst som vist nedenfor;
Et par ting, der bør bemærkes: ifølge specifikationen, den pladsholder Attributtet bør ikke bruges som et alternativ til a etiket og det foreslås også, at denne attribut kun skal anvendes på input typer, der kræver tekst, f.eks. tekst, adgangskode, Søg, e-mail, textarea og tel.
Tilføjelse pladsholder til input typer: radio og afkrydsningsfeltet vil ikke gøre nogen forskel.
Placeholder & CSS
Desuden er styling af pladsholderteksten via CSS mulig, men på tidspunktet for denne skrivning er det stadig begrænset til kun Firefox- og Webkit-browsere.
Følgende eksempel viser, hvordan vi ændrer pladsholderteksten til grønt både i Webkit og Firefox;
input: - webkit-input-placeholder farve: grøn; input: -moz-placeholder farve: grøn;
Bare for at huske, dog :: - webkit-input-pladsholder og : Moz-pladsholder vil kun påvirke teksten og kan ikke skrives parallelt.
input :: - webkit-input-placeholder, input: -moz-placeholder farve: grøn;
Dette stykke kode vil ikke fungere.
Attribut vælger
CSS3 kom også til at understøtte denne egenskab ved at introducere [Pladsholder] attribut vælgeren;
input [placeholder] border: 1px solid green;
I eksemplet ovenfor vælger vi hver input det har den pladsholder Tilskrive og ændre grænsen til grøn.
Browser Kompatibilitet
Denne nye HTML5-funktion er overraskende ikke understøttet i gamle browsere og understøttes for øjeblikket kun fuldt ud i: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 og Internet Explorer 10 (som endnu ikke er officielt udgivet).
Placeholder Polyfills
Ikke desto mindre, hvis vi skal vise pladsholderen i ældre browsere, men stadig være i stand til at bruge pladsholder attribut, vi kan bruge polyfills. Der er en masse af Placeholder Polyfills derude, men i dette eksempel skal vi bruge PlaceMe.js;
PlaceMe.js, som du kan se fra kodestykket ovenfor, er afhængig af jQuery. Nu, hvis vi ser det i for eksempel Internet Explorer 9, skal alle indtastninger nu vise stedholderteksten.
- Se Demo
- Download kilde
Endelig tanke
Det HTML5 Placeholder attribut gør det sikkert lettere at tilføje pladsholdertekst. Nu er det op til os, webudviklere og designere at vælge hvilken metode der skal bruges: JavaScript eller HTML5.
Hvis du overvejer at bruge Polyfills og jQuery til at understøtte gamle browsere er overflødige, så er JavaScript tilsyneladende mere egnet til jobbet. Men hvis du kan fredeligt ignorere de gamle browsere så bruger HTML5 Placeholder sandsynligvis en bedre måde.
