A Katso HTML5 Placeholder Attribute
Yksi suosikkikappaleistani HTML5: ssä on kyky lisätä Paikkamerkin teksti helposti. Paikkamerkkiteksti on harmaa teksti, joka löytyy syöttökentästä, jota käytetään antamaan vihje käyttäjille siitä, mihin tuloon kyseisessä kentässä odotetaan. Kun käyttäjät alkavat kirjoittaa panos kenttä, tämä teksti katoaa.
Vanhoina aikoina teemme tämän yleensä JavaScriptin avulla, seuraavasti;
Tässä käytännössä ei ole mitään vikaa, mutta HTML5: ssä on helpompaa.
HTML5 esitteli uuden ominaisuuden, jolla on looginen nimi; paikanpitäjä. Tässä on esimerkki:
Jos tarkastelemme sitä selaimissa, tulon pitäisi nyt olla harmaa teksti, kuten alla on nähty;
Muutamia asioita, jotka on huomattava: erittelyn mukaan paikanpitäjä attribuuttia ei pitäisi käyttää vaihtoehtona a etiketti ja on myös ehdotettu, että tätä ominaisuutta voidaan soveltaa vain panos tyypit, jotka vaativat tekstiä, esim. teksti, Salasana, Hae, sähköposti, tekstialue ja puh.
lisääminen paikanpitäjä että panos tyypit: radio ja valintaruutu ei tee mitään eroa.
Placeholder & CSS
Lisäksi paikkamerkin tekstin muotoilu CSS: n kautta on myös mahdollista, mutta tämän kirjoituksen aikana se on edelleen rajoitettu vain Firefox- ja Webkit-selaimiin.
Seuraava esimerkki näyttää, miten muutamme paikanvaraajan tekstiä vihreäksi sekä Webkitissä että Firefoxissa;
input :: - webkit-input-placeeholder väri: vihreä; input: -moz-placeholder väri: vihreä;
Muistakaa kuitenkin, että :: - webkit-panos-paikkamerkki ja : -Moz-paikkamerkki vaikuttaa vain tekstiin ja sitä ei voi kirjoittaa rinnakkain.
input :: - webkit-input-placeeholder, input: -moz-placeholder väri: vihreä;
Tämä koodi ei toimi.
Attribuutin valitsin
CSS3 tuli myös tukemaan tätä ominaisuutta ottamalla käyttöön [paikanpitäjä] määritteen valitsin;
input [placeholder] border: 1px kiinteä vihreä;
Yllä olevassa esimerkissä valitsemme jokaisen panos sillä on paikanpitäjä määritä ja muuta raja vihreäksi.
Selaimen yhteensopivuus
Tämä uusi HTML5-ominaisuus ei ole yllättävää, jota vanhoja selaimia tuetaan ja jota tuetaan tällä hetkellä vain: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 ja Internet Explorer 10 (jota ei ole vielä julkaistu virallisesti).
Paikkakunnan polyfillit
Kuitenkin, jos meidän on näytettävä paikanvaraaja vanhemmissa selaimissa, mutta voit silti käyttää sitä paikanpitäjä ominaisuus, voimme käyttää Polyfills-tiedostoja. On olemassa paljon Paikkakunnan polyfillit tässä esimerkissä aiomme käyttää PlaceMe.js: ää;
PlaceMe.js, kuten edellä olevasta koodinpätkästä näet, riippuu jQuerysta. Jos tarkastelemme sitä esimerkiksi Internet Explorer 9: ssä, kaikki syötteet näyttävät nyt paikanvaraajan tekstin.
- Näytä demo
- Lataa lähde
Lopullinen ajatus
HTML5 Placeholder ominaisuus tekee varmasti helpommaksi paikanvaraajan tekstin lisäämisen. Nyt meidän, web-kehittäjien ja suunnittelijoiden tehtävänä on valita, mikä menetelmä on käytössä: JavaScript tai HTML5.
Jos olet sitä mieltä, että vanhat selaimet tukevat Polyfills- ja jQuery-ohjelmien käyttöä, JavaScript on todennäköisesti paremmin työssä. Mutta jos voit jättää vanhat selaimet rauhallisesti huomiotta, HTML5 Placeholder -toiminnon käyttäminen on luultavasti parempi tapa.
