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

Diferenças entre os browsers ao interpretar JavaScript #1

December 21st, 2006. Published under IE, crossbrowser, firefox, javascript, opera. 2 Comments.

Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui
Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = objLink.getAttribute('rel');
	// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
	alert('Tipo: ' + typeof(objLinkAttRel));
}

Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:

• Tipo: string = Internet Explorer 6
• Tipo: object = Firefox 2.0.0.1
• Tipo: object = Opera 9

Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:

...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
	// Faz alguma coisa
}

Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores - como o Firefox e o Opera - você terá uma mensagem de erro - objLinkAttRel has no properties. Isto por que você está utilizando um método - substring - para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.

Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
	if ( objLinkAttRel.substring(0,3) == 'foo' ) {
		// Faz alguma coisa
	}
}
}

Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser