Leandro Vieira Pinho´s Blog

Solução para limpar e resgatar o valor default do atributo value de um campo

December 28th, 2006. Published under DOM, crossbrowser, javascript. 3 Comments.

Criei uma solução super simples e prática com o intuito de limpar e resgatar o valor default do atributo value de um campo de formulário. Observe o script:

/**
 * manager_field_default_value (0.1) - 28/12/2006
 * Leandro Vieira Pinho
 * Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
 */
var manager_field_default_value = {
	objFieldId: 'id_do_campo',
	start: function() {
		objField = this.$(this.objFieldId);
		objField.onclick = function() {
			manager_field_default_value.clearDefaultValue();
		}
		objField.onfocus = function() {
			manager_field_default_value.clearDefaultValue();
		}
		objField.onblur = function() {
			manager_field_default_value.backDefaultValue();
		}
	},
	clearDefaultValue: function() {
		if ( this.$(this.objFieldId).value == this.$(this.objFieldId).defaultValue ) {
			this.$(this.objFieldId).value = '';
		}
	},
	backDefaultValue: function() {
		if ( this.$(this.objFieldId).value == '' ) {
			this.$(this.objFieldId).value = this.$(this.objFieldId).defaultValue;
		}
	},
	$: function(strObjId) {
		return document.getElementById(strObjId);
	}
}

Para usá-lo, você precisará informar apenas o atributo ID do campo desejado. E essa informação é atribuída na propriedade objFieldId. No exemplo acima, coloquei como exemplo: id_do_campo. Uma vez configurada tal propriedade, o script saberá com qual campo de formulário ele irá trabalhar.

Feita isso, você precisa apenas chamar o método start() após a página ser carregada - window.onload. O método deve ser chamado assim:

manager_field_default_value.start();

A lógica do script é a seguinte:

Ao clicar no campo de formulário informado ou quando ele receber um foco. Será verificado se o seu valor é igual ao valor atribuído ao atributo value. Caso sim, será chamado o método clearDefaultValue que deixará o campo em branco. Quando o campo perder o foco - onblur - será verificado se o valor está em branco, se tiver voltamos com o valor default do campo