0 Compartilhamentos 364 Views

Criando um título editável com JavaScript Dom

1 de março de 2008

É impressionante o que se pode fazer com o DOM, sinceramente me agrada muito desenvolver desta forma. Mas mãos a obra, inicialmente temos que falar das funções básicas que são utilizadas neste artigo:

Função que recupera um elemento pela id utilizando o dólar ($). Essencial e muito prática esta função já virou padrão no desenvolvimento JavaScript. Seu funcionamento é extremamente simples, ela recebe por parâmetro uma string e busca na página o elemento que possui a id recebida.

function $(elemento){
return document.getElementById(elemento);
}

Função para adicionar eventos a elementos da página. Caramba, como minha vida mudou depois desta função! Ela recebe por parâmetro o objeto que receberá o evento, o evento e a função. A função addEvent é crossBrowser, ou seja, ela pode ser utilizada tanto no IE quanto no FireFox. A primeira linha da função é para o firefox a segunda para o IE, resolvi utilizar a técnica de try{}catch(e){} entre os métodos de cada objeto por ficar mais elegante para tratar browsers diferentes. Uma observação que deve ser feita é de passar para a função quando chama-la o nome do evento sem o “on” na frente, por exemplo, o evento “onclick” deve ser passado somente como “click”.

function addEvent(obj, evType, fn){
try{obj.addEventListener(evType, fn, false);}catch(e){}
try{obj.attachEvent("on"+evType, fn);}catch(e){}
}

Função de remoção de elementos filhos. Embora muita gente por ai utilizar a propriedade innerHTML para realizar esta tarefa em alguns momentos, principalmente se tratando de IE, acaba-se tendo problemas com este atributo. Partindo deste principio criei esta função que remove cada node filho de um elemento passado por parâmetro.

function removerFilhos(param){
for(var i=0,elem;elem = param.childNodes[i];i++){
elem.parentNode.removeChild(elem);
}

}

Agora após esta introdução vamos começar a fazer o nosso título editável

O código HTML é bem simples ele somente possui um título com a id “título”. Segue o código abaixo:

<html>
<head>
</head>
<body>
<h2 id="titulo" >Título Editável</h2>
</body>
</html>

Após fazer o código salve-o como titulo.htm.

Agora vamos para a função responsável por realizar a edição do título em si:

function editar(param){
var elem = param;
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value",elem.firstChild.nodeValue);
removerFilhos(elem);
elem.appendChild(input);
input.focus();
input.select();
addEvent(input,"blur",function(){
removerFilhos(elem);
elem.appendChild(document.createTextNode(input.value));
});
}

Vamos explicar cada linha, na primeira linha por questão de didática eu atribuo para a variável elem o parâmetro param que representa o node que será editado. Na segunda linha à variável input recebe a criação de um elemento do tipo input, este input que receberá o texto que se encontra dentro da tag H2. Na terceira e na quarta linha é feita a alteração de atributos do input para que este seja uma caixa de texto e receba o texto que está na tag. Após criar a caixa de texto e alterar seus atributos é necessário limpar o conteúdo da tag, para isso utilizei a função removerFilhos passando a variável elem que representa a tag H2 da nossa página. Na sexta linha eu adiciono como filho de elem a nossa caixa de texto através do método appendChild passando a caixa de texto criada como parâmetro. Após adicionar a caixa input a pagina eu utilizo o método focus para colocar o foco na caixa de texto e o método select para selecionar o texto que está na caixa. Na nona linha temos a parte mais complexa do nosso código, é a parte que temos que adicionar uma função para o elemento criado. É passado como parâmetro para a função addEvent o elemento input, o evento “blur” que executa a função quando a caixa perde o foco, e uma função escrita diretamente na chamada da função addEvent. Esta função interna que é executada assim que troca o foco do elemento input, esta limpa o conteúdo de elem através da função removerFilhos e adiciona um node de texto com o valor da caixa como filho de elem.

Para finalizar é necessário atribuir algumas funcionalidades ao evento onload da página, ou seja, assim que a página for carregada o código será execudado:

window.onload = function(){
addEvent($("titulo"),"click",new Function("editar(this)"));
}

A função acima serve para adicionar ao elemento com à id de “titulo” (que no caso é a nossa tag H2), no evento “click” a função editar que foi criada acima passando por parâmetro o próprio elemento através da declaração this.

O código completo deste exemplo se encontra abaixo, este código foi salvo com o nome titulo.js.

function $(elemento){
return document.getElementById(elemento);
}

function addEvent(obj, evType, fn){
try{obj.addEventListener(evType, fn, false);}catch(e){}
try{obj.attachEvent("on"+evType, fn);}catch(e){}
}

function editar(param){
var elem = param;
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value",elem.firstChild.nodeValue);
removerFilhos(elem);
elem.appendChild(input);
input.focus();
input.select();
addEvent(input,"blur",function(){
removerFilhos(elem);
elem.appendChild(document.createTextNode(input.value));
});
}

function removerFilhos(param){
for(var i=0,elem;elem = param.childNodes[i];i++){
elem.parentNode.removeChild(elem);
}
}

window.onload = function(){
addEvent($("titulo"),"click",new Function("editar(this)"));
}

Galera por hoje é só! Forte abraço e até a próxima!

Carregando...

Você pode se interessar

Como desativar temporariamente sua conta do Facebook
Dicas
9 visualizações
Dicas
9 visualizações

Como desativar temporariamente sua conta do Facebook

Carlos L. A. da Silva - 19 de setembro de 2020

Preparado para um "detox" da rede social? O Facebook permite que você suspenda sua conta sem precisar apagá-la permanentemente.

Promoções de Jogos do Final de Semana (18/09)
Notícias
11 visualizações
Notícias
11 visualizações

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

O que você precisa saber sobre o Pix
Artigos
19 visualizações
Artigos
19 visualizações

O que você precisa saber sobre o Pix

Carlos L. A. da Silva - 16 de setembro de 2020

Será o fim de DOCs, TEDs e transferências? Novo modelo de pagamento eletrônico proposto pelo Banco Central está prestes a entrar em funcionamento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como centralizar no CSS de forma definitiva
Dicas
21 visualizações
21 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020
Promoções de Jogos do Final de Semana (11/09)
Notícias
24 visualizações
24 visualizações

Promoções de Jogos do Final de Semana (11/09)

Carlos L. A. da Silva - 11 de setembro de 2020
Esse artigo foi escrito por um robô
Artigos
22 visualizações
22 visualizações

Esse artigo foi escrito por um robô

Carlos L. A. da Silva - 9 de setembro de 2020
Home Booth? Você quase trabalhou em um desses…
Artigos
33 visualizações
33 visualizações

Home Booth? Você quase trabalhou em um desses…

Carlos L. A. da Silva - 5 de setembro de 2020