O iMasters brilhantemente lançou uma campanha para eliminar browsers antigos do mercado, entre eles o dito cujo do IE 6. Convido todos desenvolvedores decentes a participarem dessa iniciativa e nos ajudar a matar o Internet Explorer 6, por favor.

Participar da campanha é simples, basta adicionar um pequeno e simples código nos sites de sua responsabilidade que esse código irá detectar o navegador e sua versão. Se detectado que se trata do IE 6, será exibido uma barra convidando o usuário a atualizar seu navegador e ter uma navegação mais segura e nos ajudar, é claro.

Para ajudar na divulgação da campanha e facilitar nosso trabalho hoje e amanhã, inicio agora um Meme onde o objetivo é blogar a respeito da campanha, inserir o código da campanha em seu blog e dizer por que o Internet Explorer 6 deve morrer

Convido meus amigos Metzen, Bruno Dulcetti, Japs e Michelazzo para participarem.

/**
 * 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

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