en av mina favorit nya bitar i HTML5 är möjligheten att lägga platshållare Text enkelt. Platshållartexten är den grå text som du hittar i ett inmatningsfält som används för att ge en ledtråd till användarna om vilken inmatning som förväntas i det fältet. När användare börjar skriva i fältet input försvinner texten.
i gamla dagar gör vi vanligtvis detta med JavaScript, enligt följande;
det är inget fel med denna övning, men det är lättare på HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Här är ett exempel:
<input type="text" placeholder="Placeholder Text">
om vi ser det på webbläsarna ska inmatningen nu ha den grå texten, som framgår nedan;
några saker som bör noteras: enligt specifikationen ska
några saker som bör noteras: enligt specifikationen ska attributet bör inte användas som ett alternativ till en label och det föreslås också att detta attribut endast ska tillämpas på input typer som kräver text, t. ex., text, password, search, email, textarea och tel.
lägga tillplaceholder tillinput typer:radio ochcheckbox kommer inte att göra någon skillnad.
platshållare& CSS
dessutom är det också möjligt att lägga platshållartexten via CSS, men vid tidpunkten för detta skrivande är det fortfarande begränsat till endast Firefox-och Webkit-webbläsare.,
följande exempel visar hur vi ändrar platshållartexten till grön både i Webkit och Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
bara för att komma ihåg, ::-webkit-input-placeholder och :-moz-placeholder påverkar bara texten och kan inte skrivas parallellt.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
den här koden fungerar inte.,
Attributväljare
CSS3 kom också att stödja det här attributet genom att införa attributväljaren ;
input {border: 1px solid green;}
i exemplet ovan väljer vi alla input som har attributet placeholder och ändrar gränsen till Green.,
webbläsarkompatibilitet
denna nya HTML5-funktion stöds inte i gamla webbläsare och stöds för närvarande endast fullt ut i: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 och Internet Explorer 10 (som ännu inte har släppts officiellt).
platshållare Polyfills
ändå, om vi behöver visa platshållaren i äldre webbläsare men ändå kunna använda attributetplaceholder, kan vi använda Polyfills., Det finns många platshållare Polyfills där ute men i det här exemplet kommer vi att använda PlaceMe.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>
PlaceMe.js, som du kan se från kodavsnittet ovan, är beroende av jQuery. Nu, om vi ser det i, till exempel, Internet Explorer 9 all input bör nu visa platshållartexten.
- Visa Demo
- Nedladdningskälla
slutlig tanke
HTML5 platshållare attribut gör verkligen lägga platshållare text enklare., 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 överflödigt att använda Polyfills och jQuery för att stödja gamla webbläsare, är JavaScript tydligen mer lämpat för jobbet. Men om du kan lugnt ignorera de gamla webbläsarna sedan använda HTML5 platshållare är förmodligen ett bättre sätt.