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 Firefoxuplaceholder 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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

HTML atribut scoped

HTML atribut scoped

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

Chyby při programování

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

Jak zakázat označování textu

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

Automatický focus políčka

Automatické vybrání políčka po načtení

Jak a kdy přesunout kursor do textového pole automaticky po načtení stránky.

Identifikátor v HTML/CSS/JS

HTML/CSS/JS identifikátor id

K čemu se hodí identifikátor, kdy ho používat a jaké znaky může obsahovat.

Komentáře