input text personalizado

[Daniel web 0]

Olá pessoal, estou tentando fazer um script pra colocar no meu input box. Quero que funcione como o da página do twitter (página inicial, de login), que ao clicar dentro do input permace o nome de background e quando o usuário começa a digitar o nome some, e tem o detalhe de o cursor do mouse aparecer apenas no início e não entre as letras.

Estou usando um modelo bem genérico que é o seguinte

onblur="if(this.value==''){this.value='username'}" onkeypress="if(this.value=='username'){this.value=''};"

o problema é que quando o usuário clica no nome o cursor fica entre as letras enquanto que no do twitter é como se o nome fosse um background.

[William Bruno 1501]

o do twitter não é legal exatamente por isso: ser um background.

 

em vez de alterar o .value, altere a class do <input />, ai por css você altera o background-image

 

 

mas repito, isso não é bacana, e parece ser um bug do twitter. Pois em dados momentos conseguimos escrever por cima do texto default.. eu acho ruim isso.

[Daniel web 0]

Como você sabe que o do twitter é uma imagem no background?

 

[edit]

O do tweeter não é um background, acabei de olhar pelo firebug. Tem uma classe holder e o texto entre span.

[William Bruno 1501]

use o Responder Azul

ou a 'Resposta Rápida'.

 

apenas olhando, é como eu faria.

 

mas analisando o código com o Firebug, é um texto posicionado com absolute e uma transição css.

.logged-out form .holding .holder {
   -moz-transition: opacity 0.1s ease 0s, font-size 0.1s ease 0s;
   color: #999999;
   cursor: text;
   left: 8px;
   position: absolute;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   top: 0;
   white-space: nowrap;
   z-index: 1;
}

ainda assim, não deixa de ser bugado. :lol:

[Daniel web 0]

Não consegui aplicar o código (ou ele não funcionou), pode me dizer como inserí-lo?