Salve salve galera!

Se vc está acompanhando essa série de posts até aqui, então estamos indo bem.

Evoluindo em cada passo. Poderíamos parar na parte 2, e deixar apenas aquilo, mas não estou contente com aquele código, pq se forem 2 inputs, tenho 2 vezes o mesmo código, mas e se forem 5 ou 10 inputs ?

Inimaginável mantermos um código assim. Legal, aprendemos a resolver o problema, então agora, vamos aprender a como melhorar nossa solução.

A primeira resposta óbvia que deveria vir a nossa mente, é: criar uma function reaproveitável !

Partindo dessa premissa, nossa function, precisa de 2 parâmetros [ pois são somente duas coisas que variam ]

function limpa( el, msg ){}

ou seja, o elemento e a mensagem. Afinal, é somente isso que muda e precisa mudar.

Fica fácil de observarmos isso, olhando a duplicação que fizemos na parte 2, para ter mais de um input.

Visto isso, chegamos no seguinte:

function limpa( el, msg )
{
	el.focus(function(){
		if( $( this ).val()==msg )
			$( this ).val( '' );
	});
	el.blur(function(){
		if( $( this ).val() == '' )
			$( this ).val( msg );
	});
}

Legal, e a chamada fica apenas:

$(document).ready(function(){
	limpa( $("input[name='telefone']"), 'Digite seu telefone' );
	limpa( $("input[name='email']"), 'Digite seu e-mail' );
});

beeem melhor do que anteriormente, e agora para novos inputs, só precisamos chamar a função novamente, informando para quais campos ela deve agir, e qual era a mensagem default.

Só que como prometi, vamos transformar isso em um plugin, apenas pela brincadeira de fazer um.

http://docs.jquery.com/Plugins/Authoring

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	/**
	 * @file jquery.placeholder.js
	 * @author William Moraes - wbruno
	 * @site http://wbruno.com.br
	 * @version 1.0 beta
	 */

	function trim( str ){ return str.replace(/^\s+|\s+$/g,""); }

	jQuery.fn.limpa = function( settings ){
		var $this = jQuery( this );
		var defaults = {
			msg: $this.val(),
			default: 'defaultInput',
			active: 'activeInput'
		}
		settings = jQuery.extend(defaults, settings);

		$this.focus(function(){
			if( $this.val()==settings.msg )
				$this.removeClass( settings.default ).addClass( settings.active ).val( '' );
		});
		$this.blur(function(){
			if( trim( $this.val() ) == '' )
				$this.removeClass( settings.active ).addClass( settings.default ).val( settings.msg );
		});
		if( $this.val()==settings.msg ) $this.addClass( settings.default );

		return $this;
	}
	$(document).ready(function(){
		$("input[name='telefone']").limpa();
		$("input[name='email']").limpa();
		$("input[name='cep']").limpa();
	});
	</script>
	<style type="text/css">
	.defaultInput { color: #b9b3d0; }
	.activeInput { color: #000; }
	</style>
</head>
<body>
	<input type="text" name="telefone" value="Digite seu telefone" />
	<input type="text" name="email" value="Digite seu e-mail" />
	<input type="text" name="cep" value="Digite seu cep" />
</body>
</html>

Adicionei uma ‘perfumaria’ a mais, trocar a class, caso a mensagem esteja default.

Para o nosso escopo inicial, nem era necessário as configurações default ali, como a mensagem e tal, eu poderia ter usado direto:

jQuery.fn.limpa = function( settings ){
		var $this = jQuery( this );
		var msg = $this.val();

		$this.focus(function(){
			if( $this.val()==msg )
				$this.val( '' );
		});
		$this.blur(function(){
			if( $this.val() == '' )
				$this.val( msg );
		});

		return $this;
	}

ai o plugin ficaria ridicularmente simples, e apenas resolveria o mesmo que a nossa function.

Se vc se perdeu na versão ‘completa’, olhe esta ultima que postei, entenda, e depois veja a outra novamente.

Bom, é isso. Acredito que consegui explicar bem oque pretendia.

Caso surjam duvidas quanto ao plugin, utilização dele, ou o motivo de eu ter usado as classes css, e deixar a mensagem default configurável, eu posso explicar depois.

Obrigado por ter acompanhando esses 3 posts. Espero que eles sejam úteis, para lhe ajudar a pensar sobre ‘como programar’, e não apenas esse código em especifico que postei.

Demonstração

Parte 1

Parte 2