Recentemente programando com minha amiga Carolina Mascarenhas ela fez um placeholder bem parecido com o do twitter, apenas dei uma acabada no código e coloquei no formato de plugin.

Placeholder é quando o label de um campo input está localizado dentro do pŕoprio input. Como podemos ver na imagem abaixo:

Segue a página contendo o exemplo: http://jspace.com.br/jquery-placeholder-plugin/

Como utilizar:

Adicionar os arquivos jquery.js, jquery.placeholder.js e o placeholder.css a página.

<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="jquery.placeholder.js" ></script>
<link href="placeholder.css" type="text/css" rel="stylesheet" />

O html deve respeitar a seguinte estrutura:

<div class="holding username">

<input type="text" id="username" name="username" />

<span class="holder">Email</span>
</div>

Onde o conteúdo que estiver dentro da tag <span> será o que aparecerá dentro do input.

Tendo isso como premissa, o código para adicionar o placeholder deverá ser o seguinte:

 jQuery(".username").placeholder();

Onde “.username” é a classe da div. Também pode ser utilizado o id.

Algumas opções podem ser especificadas:

jQuery(".username").placeholder({

color_onfocus: "b9b9b9",

color_background_onfocus: "white"
});

Cabe lembrar que o HTML5 tem suporte nativo ao placeholder bastando apenas colocar a propriedade placeholder=”Rodrigo Ramalho” dentro do input.

exemplo:

<input type="text" name="exemplo" placeholder="Demonstrando placeholder" />

Simples assim. Porém nem todos os browsers suportam HTML5 ainda.

Pra quem quiser contribuir e/ou entender melhor o projeto, o source está no meu github:

https://github.com/hodrigohamalho/jquery-placeholder-plugin