HTML atribut placeholder

<input type="text" placeholder="text">
<textarea placeholder="text">
</textarea>

Od IE 10 je možné nastavit bez JavaScriptu do značky <input> nebo <textarea> nějakou hodnotu jako příklad, která po kliknutí do políčka zmizí.

Samostatná ukázka.

Je otázka, jestli je současná implementace tohoto atributu v prohlížečích vyhovující. Firefox a Chrome totiž obsah placeholderu neodstraní ihned po kliknutí, ale až když se v poli začne psát.

Mám trochu obavu, že člověk, co do pole klikne a ve zmíněných prohlížečích neuvidí žádnou odezvu, bude chtít text smazat klávesou Delete nebo Backspace, což ale nepůjde.

Internet Explorer a stará Opera 12 obsah placeholderu odstraní už při kliknutí (focusu).

Řešení v JavaScriptu

Možná je proto stále lepší staré dobré řešení v JavaScriptu, kde se dá rozumné chování zajistit jednotně ve všech prohlížečích.

Kromě smazání výchozí hodnoty existuje i řešení, kdy se políčko označí, takže půjde rovnou přepsat správnou hodnotou.

Smazání výchozí hodnoty

Využít lze události onfocus a onblur. Původní hodnota value se nachází ve vlastnosti defaultValue.

Samostatná ukázka.

Označení obsahu

Označení celého formulářového pole vypadá dost podobně. Jen se místo vymazání value při focusu celé pole označí přes select(). Pro správnou funkčnost v Chrome je nutné ještě stornovat událost onmouseup.

Samostatná ukázka.

Animovaný placeholder

Hotové řešení placeholderu, jehož text mizí / objevuje se po jednotlivých písmenkách.

Stylování placeholderu

Pro nastavení stylu textu zadaného do atributu placeholder existují pseudotřídy ::placeholder nebo ::input-placeholder navíc s prefixy pro různé prohlížeče.

Opera 12

Stylování placeholderu neumožňuje.

Chrome

Ač je v názvu selektoru input, funguje i pro <textarea>.

::-webkit-input-placeholder {
  /* styl */
}

Firefox

Do Firefoxu 18.

:-moz-placeholder {
  /* styl */ 
}

V novějších potom s dvojtečkou navíc.

::-moz-placeholder {
  /* styl */ 
}

Pan habendorf doplnil, že ve Firefoxu má placeholder poloviční průhlednost (opacity: 0.5), která způsobuje, že barvy nastavené pro placeholder nemají ve výsledku plnou sytost. Ukázka. Není-li takové chování žádoucí, stačí přidat opacity: 1.

Internet Explorer

IE 10+

:-ms-input-placeholder {
  /* styl */ 
}

Ukázka pro všechny prohlížeče.

Pozor, zápis se sloučením všech selektorů k jedné deklaraci nebude fungovat. Prohlížeče si vylámou zuby na selektorech konkurence a styly se neaplikují.

::-webkit-input-placeholder, 
:-moz-placeholder, 
::-moz-placeholder, 
:-ms-input-placeholder {
  /* společný styl, nebude fungovat */ 
}

Placeholder jako popisek

Použití placeholderu místo popisku formuláře je vždy dobré zvážit. Může se stát, že uživatel klikne do políčka dříve, než si přečte a zapamatuje, co tam má vyplnit.

Tím se může dostat do dost svízelné situace, kdy se už k popisku dostane jen nepohodlným obnovením celé stránky.

Odkazy jinam

• Implementace placeholderu pro starší prohlížeče v jQuery: Making HTML5 Placeholder Input Fields Cross-Browser with jQuery
• Řešení stylovatelnosti ve staré Opeře: How to style the <input> placeholder?
• Animovaný placeholder