En av mine favoritt nye stykker i HTML5 er muligheten til å legge til plassholderteksten lett. Plassholderteksten er grå tekst som du finner i en input-feltet som brukes til å gi et hint til brukere på hvilke innspill som er forventet i det feltet. Når brukere begynn å skrive i input – feltet, denne teksten vil forsvinne.
I gamle dager, vi vanligvis gjøre dette med JavaScript, som følger;
Det er ingenting galt med denne praksis, men det er lettere på HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Her er et eksempel:
<input type="text" placeholder="Placeholder Text">
Hvis vi ser det på nettlesere, innspill bør nå har den grå teksten, som vist nedenfor;
Et par ting som bør bemerkes: i henhold til spesifikasjon, placeholder attributtet skal ikke brukes som et alternativ til en label og det er også foreslått at denne egenskapen bør bare brukes til input typer som krever tekst, f.eks., text, password, search, email, textarea og tel.
å Legge til placeholder til input typer: radio og checkbox vil ikke gjøre noen forskjell.
Plassholder & CSS
Videre, styling plassholderteksten gjennom CSS er også mulig, men på den tiden dette ble skrevet er fortsatt begrenset til bare Firefox og Webkit nettlesere.,
følgende eksempel viser hvordan vi kan endre plassholder for tekst til grønt både i Webkit og Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Bare å huske på skjønt, ::-webkit-input-placeholder og :-moz-placeholder vil bare påvirke tekst, og kan være skrevet i parallell.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Denne delen av koden som ikke vil fungere.,
Attributt Selector
CSS3 kom også til å støtte dette attributtet ved å innføre attributt selector;
input {border: 1px solid green;}
I eksempelet ovenfor, vi velger hver input som placeholder attributt og endre grensen til grønt.,
Nettleser Kompatibilitet
Denne nye HTML5-funksjonen ikke overraskende er ikke støttet i gamle nettlesere og er for tiden bare fullt ut støttet i: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 og Internet Explorer 10 (som ikke har blitt offisielt utgitt ennå).
Plassholder Polyfills
Likevel, hvis vi trenger å vise plassholder i eldre nettlesere, men fortsatt være i stand til å bruke placeholder attributtet, kan vi bruke Polyfills., Det er mange av Plassholder Polyfills ut der, men i dette eksempelet skal vi bruke 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 fra kodebiten over, er avhengig av jQuery. Nå, hvis vi ser det i, for eksempel, Internet Explorer 9 alle innspill skal nå vise plassholderteksten.
- Vis Demo
- Last ned Kilde
Siste Tenkte
HTML5 Plassholder attributt gjør sikkert legge til plassholderteksten lettere., Nå er det opp til oss, web-utviklere og designere til å velge hvilken metode som skal brukes: JavaScript-eller HTML5.
Hvis du tenker på at du bruker Polyfills og jQuery for å støtte gamle nettlesere er overflødig, så JavaScript er tydeligvis mer egnet for jobben. Men hvis du kan fredelig ignorere den gamle nettlesere deretter bruke HTML5 Plassholder er sannsynligvis en bedre måte.