0 Compartilhamentos 390 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

Mega Hack 5ª Edição – A última jornada do ano vai começar
Notícias
8 visualizações
Notícias
8 visualizações

Mega Hack 5ª Edição – A última jornada do ano vai começar

Redação - 27 de outubro de 2020

A última edição do maior hackathon online do Brasil está com as inscrições abertas!

Como reduzir o ruido de fundo no microfone com aprendizado de máquina
Dicas
6 visualizações
Dicas
6 visualizações

Como reduzir o ruido de fundo no microfone com aprendizado de máquina

Carlos L. A. da Silva - 27 de outubro de 2020

Krisp é uma ferramenta gratuita que emprega algoritmos de Inteligência Artificial para identificar ruídos em tempo real.

Composer 2.0 está entre nós!
Artigos
8 visualizações
Artigos
8 visualizações

Composer 2.0 está entre nós!

Carlos L. A. da Silva - 26 de outubro de 2020

O melhor gerenciador de pacotes PHP atinge a maturidade com nova versão. Confira o que muda e como atualizar.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (23/10)
Notícias
20 visualizações
20 visualizações

Promoções de Jogos do Final de Semana (23/10)

Carlos L. A. da Silva - 23 de outubro de 2020
Você precisa conhecer YAML
Artigos
20 visualizações
20 visualizações

Você precisa conhecer YAML

Carlos L. A. da Silva - 20 de outubro de 2020
Promoções de Jogos do Final de Semana (16/10)
Notícias
29 visualizações
29 visualizações

Promoções de Jogos do Final de Semana (16/10)

Carlos L. A. da Silva - 16 de outubro de 2020
Os 7 piores erros de Excel da História
Artigos
30 visualizações
30 visualizações

Os 7 piores erros de Excel da História

Carlos L. A. da Silva - 15 de outubro de 2020