een van mijn favoriete nieuwe stukken in HTML5 is de mogelijkheid om Placeholder tekst gemakkelijk toe te voegen. De placeholder tekst is de grijze tekst die u vindt in een invoerveld dat wordt gebruikt om een hint te geven aan de gebruikers over welke invoer wordt verwacht in dat veld. Zodra gebruikers beginnen te typen in het input veld, zal deze tekst verdwijnen.
vroeger deden we dit meestal met JavaScript, als volgt;
Er is niets mis met deze praktijk, maar het is makkelijker met HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Hier is een voorbeeld:
<input type="text" placeholder="Placeholder Text">
Als we het zien op de browsers, de ingang mag nu het grijze tekst, zoals hieronder te zien is;
Een paar dingen die dienen te worden vermeld: volgens de specificatie van de placeholder attribuut mag niet worden gebruikt als alternatief voor een label en het is ook gesuggereerd dat dit kenmerk moet alleen worden toegepast op de input soorten waarvoor de tekst, bijv., text, password, search, email, textarea en tel.
het toevoegen van placeholder aan de input types: radio en checkbox maakt geen verschil.
Placeholder & CSS
verder is het stylen van de placeholder tekst via CSS ook mogelijk, maar op het moment van dit schrijven is nog steeds beperkt tot alleen Firefox en Webkit browsers.,
Het volgende voorbeeld laat zien hoe we de tijdelijke aanduiding wijzigen tekst groen, zowel in Webkit en Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Net om te herinneren, de ::-webkit-input-placeholder en :-moz-placeholder alleen van invloed op de tekst en kan niet worden geschreven in parallel.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Dit stukje code zal niet werken.,
attribuut Selector
CSS3 kwam ook om dit attribuut te ondersteunen door de introductie van de attribuut selector;
input {border: 1px solid green;}
in het voorbeeld hierboven selecteren we elke input die de attribuut en verander de rand naar groen.,
browsercompatibiliteit
deze nieuwe HTML5-functie wordt niet verrassend 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 uitgebracht).
Placeholder Polyfills
als we de placeholder in oudere browsers moeten weergeven maar toch het placeholder attribuut kunnen gebruiken, kunnen we Polyfills gebruiken., Er zijn veel Placeholder Polyfills maar in dit voorbeeld gaan we de PlaceMe gebruiken.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
The PlaceMe.js, zoals je kunt zien aan de code fragment hierboven, is afhankelijk van jQuery. Nu, als we het bekijken in, bijvoorbeeld, Internet Explorer 9 alle invoer moet nu de placeholder tekst weer te geven.
- bekijk Demo
- Download Source
Final Thought
Het HTML5 Placeholder attribuut maakt het toevoegen van placeholder tekst zeker gemakkelijker., Nu is het aan ons, webontwikkelaars en ontwerpers, om te kiezen welke methode te gebruiken: JavaScript of HTML5.
Als u van mening bent dat het gebruik van Polyfills en jQuery om oude browsers te ondersteunen overbodig is, dan is JavaScript blijkbaar meer geschikt voor de taak. Maar als je rustig kunt negeren de oude browsers dan met behulp van HTML5 Placeholder is waarschijnlijk een betere manier.