en af mine foretrukne nye stykker i HTML5 er evnen til at tilføje pladsholder tekst nemt. Pladsholderteksten er den grå tekst, som du finder i et inputfelt, der bruges til at give et tip til brugerne om, hvilket input der forventes i dette felt. Når brugerne begynder at skrive i feltet input, forsvinder denne tekst.
i gamle dage gør vi det ofte med JavaScript som følger;
Der er ikke noget 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å de browsere, input bør nu har den grå tekst, som ses nedenfor;
Et par ting, der bør bemærkes: i henhold til specifikation, den placeholder attribut bør ikke bruges som et alternativ til en label og det er også foreslået, at denne egenskab kun bør anvendes til input typer, der kræver tekst, fx, text password search email textarea og tel.
Tilføjelse placeholder til input type: radio og checkbox vil ikke gøre nogen forskel.
Pladsholder & CSS
Desuden, styling pladsholder tekst ved hjælp af CSS er også muligt, men på det tidspunkt dette skrives, er det stadig begrænset til kun Firefox og Webkit browsere.,
følgende eksempel viser, hvordan vi ændrer den pladsholder tekst til grøn både i Webkit og Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Bare at huske selv, ::-webkit-input-placeholder og :-moz-placeholder vil kun påvirke tekst og kan være skrevet i parallel.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
dette stykke kode virker ikke.,
Attribut-Selector
CSS3 kom også til at støtte denne attribut ved at indføre attribut-selector;
input {border: 1px solid green;}
I ovenstående eksempel, vi vælger hvert input, der har placeholder attribut og ændre grænsen til grøn.,
Browser Kompatibilitet
Denne nye HTML5 har ikke overraskende er ikke understøttet i alle browsere og er i øjeblikket kun fuldt understøttet i: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 og Internet Explorer 10 (som ikke er officielt blevet frigivet endnu).
Pladsholder Polyfills
ikke desto mindre, hvis vi er nødt til at vise pladsholder i ældre browsere, men stadig være i stand til at bruge placeholder attribut, vi kan bruge Polyfills., Der er en masse pladsholder Polyfills derude, men i dette eksempel vil vi bruge 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 kodestykket ovenfor, er afhængig af J .uery. Nu, hvis vi ser det i for eksempel Internet e .plorer 9, skal alle input nu vise pladsholderteksten.
- Vis Demo
- do .nload kilde
endelig tanke
HTML5-Pladsholderattributten gør det bestemt lettere at tilføje pladsholdertekst., Nu er det op til os, developersebudviklere og designere, at vælge, hvilken metode der skal bruges: JavaScript eller HTML5.
Hvis du mener, at det er overflødigt at bruge Polyfills og J .uery til at understøtte gamle bro .sere, er JavaScript tilsyneladende mere egnet til jobbet. Men hvis du fredeligt kan ignorere de gamle bro .sere, er det sandsynligvis en bedre måde at bruge HTML5-pladsholder.