Jak se zbavit placeholderu při focusu

Také vám v některých případech vadí, že po focusu do inputu/textarey nezmizí placeholder?

Každý už asi ví jak ostylovat placeholder:

input::-moz-placeholder{color:#000;}
input::-webkit-input-placeholder{color:#000;}

Ale párkrát nám příšel od klientů požadavek, proč text nezmizí, když se do něj focusneme. Někteří lidé se dokonce snaží placeholder označit, aby jej mohli smazat, což jim samozřejmě nejde.

Je to standardní chování prohlížeče, ale každý prohlížeč si to interpretuje po svém. V Chrome, Safari a Firefoxu text nemizí. V Opeře mízí. Je dobré toto chování sjednotit.

Jak to sjednotit a vyhnout se reportům ze strany klienta? Jednoduché, změňte barvu placeholderu při focusu do inputu na průhlednou pomocí rgba(0,0,0,0)

input:focus::-moz-placeholder{color:rgba(0,0,0,0)}
input:focus::-webkit-input-placeholder{color:rgba(0,0,0,0)}

Pokud u inputu není viditelný label, tak doporučujeme text neodstraňovat. Mohli by jste touto úpravou, uživatelům znepříjemnit vyplnění vašeho formuláře. Uživatel by měl vidět co má vyplnit. Návštěvníkům vašeho webu se totiž může stát, že se focusnou do inputu aniž by si přečetli co mají vyplnit a hned nastane problém.

Sdílet článek:

Tomáš Krejčí Autor: Tomáš Krejčí
tomas.krejci@superkoderi.cz Twitter Kippt LinkedIn LastFM

Komentáře

  • Avatar

    1. manakmichal 01. 11. 2013 v 20:28

    Ahoj, docela by mě zajímal důvod, který vede k potřeba odmazávat placeholder inputu při focus. Ideálně nějaká situace s příkladem formuláře. Díky moc.

  • Avatar

    2. Honza Hommer 01. 11. 2013 v 21:44

    Kvůli zmatení uživatele. Aby neměl pocit, že musí něco mazat, když udělá focus na input.

  • Avatar

    3. Tomáš Krejčí - SuperKodér | 02. 11. 2013 v 09:05

    Souhlasím s Honzou. Reálně jsem se setkal se situací, kdy můj známý se snažil umazat placeholder :) Možná by jen stačilo barvu placeholderu hodně zesvětlit, k čemuž slouží výše uvedený návod také.






Využijte formátování Texy!

Evropský fond pro regionální rozvoj CzechStarter Společnost SuperKodéři s.r.o. byla podpořená agenturou CzechInvest v rámci projektu Podpora start-upů, klíčové aktivity CzechStarter, realizované z programu Marketing, prioritní osy č. 2 "Rozvoj podnikání a konkurenceschopnosti malých a středních podniků" v rámci Operačního programu Podnikání a inovace pro konkurenceschopnost.

SuperKodéři se mění na SUPERKODERS. Už jsme spustili prozatímní jednoduchou stránku, která vám nové Superkodéry představí.

Přejít na nový web Zůstat na současném webu