Yksi suosikkini uutta kappaletta HTML5 on kyky lisätä Paikkamerkin Tekstiä helposti. Paikkamerkin teksti on harmaa teksti etsi-kenttään, jota käytetään antamaan vihje käyttäjille, mitä tietoa on odotettavissa, että alalla. Kun käyttäjät alkavat kirjoittaa input – kenttään, tämä teksti katoaa.
ennen vanhaan, me yleensä tehdä tämän kanssa JavaScript, seuraavasti;
ei ole mitään vikaa tätä käytäntöä, mutta se on helpompaa HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Tässä on esimerkki:
<input type="text" placeholder="Placeholder Text">
Jos me tarkastella sitä selaimet, tulo pitäisi nyt olla harmaa teksti, kuten alla;
muutamia asioita, jotka olisi huomattava: spesifikaation mukaan, placeholder määrite ei tulisi käyttää vaihtoehtona label ja se on myös suositeltavaa, että tämä ominaisuus olisi sovellettava ainoastaan input tyypit, jotka vaativat teksti, esim., text, password, search, email, textarea ja tel.
Lisäämällä placeholder ja input – tyypit: radio ja checkbox ei tee mitään eroa.
Paikkamerkki & CSS
Lisäksi, muotoilu paikkamerkin tekstin kautta CSS on myös mahdollista, mutta tätä kirjoitettaessa on vielä rajoitettu vain Firefox ja Webkit selaimet.,
seuraava esimerkki näyttää, miten me muuttaa paikkamerkin teksti vihreä sekä Webkit ja Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Vain muista kuitenkin, ::-webkit-input-placeholder ja :-moz-placeholder vaikuttaa vain tekstiä ja voi olla kirjoitettu rinnakkain.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
tämä koodinpätkä ei toimi.,
– Attribuutin Valitsin
CSS3 tuli myös tukea tätä ominaisuutta ottamalla käyttöön attribuutti valitsin;
input {border: 1px solid green;}
yllä olevassa esimerkissä, emme valitse jokainen input se on placeholder määritteen ja muuttaa rajan vihreä.,
Selain Yhteensopivuus
Tämä uusi HTML5 ominaisuus yllättävää ei tueta vanhoissa selaimissa, ja on tällä hetkellä vain täysin tuettu: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 ja Internet Explorer 10: n (joka ei ole virallisesti julkaistu vielä).
Placeholder Polyfills
Kuitenkin, jos meidän täytyy näyttää paikkamerkin vanhemmissa selaimissa, mutta silti voi käyttää placeholder ominaisuus, voimme käyttää Polyfills., On olemassa paljon Paikkamerkki Polyfills siellä, mutta tässä esimerkissä aiomme käyttää 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, kuten näet koodin pätkä edellä, on riippuvainen jQuery. Nyt, jos katsomme, esimerkiksi Internet Explorer 9 kaikki tulo pitäisi nyt näyttää paikanpitäjäteksti.
- katso Esittely
- Lataa Lähde
Ajatuksen
HTML5 Paikkamerkki määrite varmasti tekee lisäämällä paikkamerkin teksti helpompaa., Nyt on meidän, web kehittäjät ja suunnittelijat, valita, mitä menetelmää käyttää: JavaScript tai HTML5.
Jos ajatellaan, että käyttämällä Polyfills ja jQuery tukea vanhoja selaimia on tarpeeton, sitten JavaScript on ilmeisesti paremmin työtä. Mutta jos voit rauhallisesti sivuuttaa Vanhat selaimet niin HTML5 Placeholder on luultavasti parempi tapa.