Een kijkje in HTML5 Placeholder-kenmerk
Een van mijn favoriete nieuwe stukken in HTML5 is de mogelijkheid om toe te voegen Placeholder-tekst gemakkelijk. De plaatsaanduidingstekst is de grijze tekst die u vindt in een invoerveld dat wordt gebruikt om een hint te geven aan de gebruikers over welke invoer in dat veld wordt verwacht. Zodra gebruikers beginnen te typen in de invoer veld, deze tekst zal verdwijnen.
In de oude dagen doen we dit meestal met JavaScript, als volgt;
Er is niets mis met deze praktijk, maar het is gemakkelijker op HTML5.
HTML5 heeft een nieuw kenmerk met een logische naam geïntroduceerd; placeholder. Hier is een voorbeeld:
Als we het in de browsers bekijken, zou de invoer nu de grijze tekst moeten hebben, zoals hieronder te zien is;
Een paar dingen die moeten worden opgemerkt: volgens de specificatie, de placeholder attribuut mag niet worden gebruikt als een alternatief voor een label en er wordt ook gesuggereerd dat dit kenmerk alleen moet worden toegepast op invoer typen die tekst vereisen, b.v.. tekst, wachtwoord, zoeken, e-mail, textarea en tel.
Het toevoegen placeholder naar de invoer types: radio- en checkbox maakt geen enkel verschil.
Placeholder & CSS
Verder is het ook mogelijk om de tekst van de tijdelijke aanduiding via CSS te stylen, maar op het moment van schrijven is dit nog steeds beperkt tot alleen Firefox en Webkit-browsers.
Het volgende voorbeeld laat zien hoe we de tekst van de tijdelijke aanduiding naar groen wijzigen, zowel in Webkit als Firefox;
invoer :: - webkit-invoer-placeholder kleur: groen; input: -moz-placeholder color: green;
Om maar te onthouden, de :: - webkit-input-placeholder en : -Moz-placeholder heeft alleen invloed op de tekst en kan niet parallel worden geschreven.
input :: - webkit-input-placeholder, input: -moz-placeholder color: green;
Dit stuk code zal niet werken.
Kenmerkselector
CSS3 kwam ook om dit attribuut te ondersteunen door het introduceren van de [Placeholder] attribuutselector;
invoer [placeholder] border: 1px effen groen;
In het bovenstaande voorbeeld selecteren we elke invoer dat heeft de placeholder attribuut en verander de rand in groen.
Browsercompatibiliteit
Deze nieuwe HTML5-functie is niet verwonderlijk wordt niet ondersteund in oude browsers en wordt momenteel alleen volledig ondersteund in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 en Internet Explorer 10 (die nog niet officieel is vrijgegeven).
Placeholder Polyfills
Niettemin, als we de placeholder in oudere browsers moeten weergeven maar toch de placeholder attribuut, we kunnen Polyfills gebruiken. Er zijn veel Placeholder Polyfills daar maar in dit voorbeeld gaan we de PlaceMe.js gebruiken;
De PlaceMe.js, zoals je kunt zien in het bovenstaande codefragment, is afhankelijk van jQuery. Als we het nu bekijken in bijvoorbeeld Internet Explorer 9, zou alle invoer nu de tekst van de tijdelijke aanduiding moeten weergeven.
- Demo bekijken
- Download de bron
Laatste gedachte
De HTML5 Placeholder attribuut maakt het zeker toevoegen van plaatsaanduidingstekst eenvoudiger. Nu is het aan ons, webontwikkelaars en ontwerpers, om te kiezen welke methode te gebruiken: JavaScript of HTML5.
Als u bedenkt dat het gebruik van Polyfills en jQuery om oude browsers te ondersteunen overbodig is, is JavaScript kennelijk meer geschikt voor de taak. Maar als u de oude browsers rustig kunt negeren, is het gebruik van HTML5 Placeholder waarschijnlijk een betere manier.
