placeholder estilizado e que se mantém sempre visível

173 views
Skip to first unread message

Felipe Rohde

unread,
May 31, 2012, 1:55:45 PM5/31/12
to jque...@googlegroups.com
Olá. alguém conhece algum plugin ou alguma técnica para criar placeholders;

O que eu quero não é o placeholver comum do html5. e sim solucionar um problema criado pelo mau uso dele.
Depois de descoberto essa maravilhos propriedade, muitos desenvolvedores simplesmente pararam de colocar um label nos inputs, já que o placeholder satisfazia isso.
mas o caso é que após preencher os campos, o usuário não fará a minima idéia do tipo de conteúdo que contém no input, ou até mesmo durante o preenchimento do mesmo. isso é muito pior do que a não existência do placeholder,
pois é, peguei um site para refatorar e ele foi feito assim.

gostaria de saber se conhecem algum plugim que criar um placeholder no input e quando este está no foco, o placeholder se mantenha aparente, nao necessáriamente um plugin, uma técnica, uma gambi, alguma coisa rápida.

Felipe Rohde

unread,
May 31, 2012, 2:25:00 PM5/31/12
to jque...@googlegroups.com
uma obs: a hipótese de adicionar os labels está descartada;

Mauricio Almeida Machado

unread,
May 31, 2012, 2:32:46 PM5/31/12
to jque...@googlegroups.com
pq nao coloca um title ou um tooltip no input?




--
Mauricio A. Machado

PGS - Medical Statistics
PHP Developer 

Felipe Rohde

unread,
May 31, 2012, 2:35:51 PM5/31/12
to jque...@googlegroups.com
devo seguir o PSD e neste o placeholder se mantém aparente sempre, como se fosse um value, além disso, o 'placeholder' deve estar de uma cor e o valor de outro.

Tiago Celestino

unread,
May 31, 2012, 4:20:49 PM5/31/12
to jque...@googlegroups.com
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text


Tiago Celestino
+55 71 88257389
tcele...@gmail.com
---
---
Blog: http://fastblog.tcelestino.com.br


2012/5/31 Felipe Rohde <fr.r...@gmail.com>

@gilsones

unread,
May 31, 2012, 8:24:00 PM5/31/12
to jque...@googlegroups.com
cria uma div, p, ou a tag que preferir e coloca position:relative nela;

dentro dela coloca os Inputs e Labes.
nas Labels vc coloca position:absolute e posiciona de acordo com cada Input

E nos Inputs você usa o .focusIn() e .focusOut() do jquery para mostrar e esconder cada Label. Pode até colocar uma animação.

Bruno Mendes

unread,
May 31, 2012, 9:52:19 PM5/31/12
to jque...@googlegroups.com
Um jeito que eu tentaria fazer seria adicionando o elemento dinamicamente, fiz um teste rapido aqui e saiu isso ó


Eu passei por uma situação parecida com essa e estava usando Bootstrap, o que eu fiz foi fazer com que quando o elemento estivesse com focus, ele montasse uma tooltip passando o texto como parametro, e desmontando quando tirasse o foco

Abraço
_____________________________________________________________
Bruno Mendes Soares

skype: bruno2ms
fone: (38) 8837-3568



2012/5/31 @gilsones <gilson....@gmail.com>

--

Bruno Mendes

unread,
May 31, 2012, 10:29:22 PM5/31/12
to jque...@googlegroups.com
So um edit, o exemplo funcionou com vários campos  http://jsbin.com/uyegoc/5/edit 

_____________________________________________________________
Bruno Mendes Soares

skype: bruno2ms
fone: (38) 8837-3568



Felipe Rohde

unread,
Jun 1, 2012, 9:36:30 AM6/1/12
to jque...@googlegroups.com
muito bom seu exemplo Bruno Mendes, dava até pra transformar isso num pluguinzinho quem sabe.
2012/5/31 @gilsones <gilson....@gmail.com>


Felipe Rohde

unread,
Jun 1, 2012, 10:17:45 AM6/1/12
to jque...@googlegroups.com
o que eu queria éra algo assim: agora só falta ajustes, valeu ai pessoal:

http://jsbin.com/uyegoc/9/edit


On Thursday, May 31, 2012 11:29:22 PM UTC-3, Bruno Mendes wrote:
2012/5/31 @gilsones <gilson....@gmail.com>


Bruno Mendes

unread,
Jun 1, 2012, 1:23:31 PM6/1/12
to jque...@googlegroups.com
Opa Felipe, valew aê, tava pensando nisso mesmo ontem, 

Tentar estudar como fazer plugins do jquery e montar esse esquema com umas options e eventos bacanas


Vou tentar e qq coisa passo pro grupo 

_____________________________________________________________
Bruno Mendes Soares

skype: bruno2ms
fone: (38) 8837-3568



Felipe Rohde

unread,
Jun 1, 2012, 3:29:15 PM6/1/12
to jque...@googlegroups.com
plugin iniciado, tenho ideias para melhora-lo ja e também algumas opçoes, como por exemplo: definir se o falso placeholder ficará dentro ou fora do input...

Felipe Rohde

unread,
Jun 1, 2012, 3:29:31 PM6/1/12
to jque...@googlegroups.com
esqueci o link:

Bruno Mendes

unread,
Jun 1, 2012, 4:03:48 PM6/1/12
to jque...@googlegroups.com
Massa em!

E eu recebo algum credito pela solução?

_____________________________________________________________
Bruno Mendes Soares

skype: bruno2ms
fone: (38) 8837-3568



2012/6/1 Felipe Rohde <fr.r...@gmail.com>

Felipe Rohde

unread,
Jun 1, 2012, 4:50:15 PM6/1/12
to jque...@googlegroups.com
da um fork la meu! vou colocar seu nome no cabeçalho do js
Massa em!

2012/6/1 Felipe Rohde <fr.r...@gmail.com>
Reply all
Reply to author
Forward
0 new messages