0 Compartilhamentos 404 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 a Nvidia está usando rede neural no lugar de codecs de vídeo
Artigos
5 visualizações
Artigos
5 visualizações

Como a Nvidia está usando rede neural no lugar de codecs de vídeo

Carlos L. A. da Silva - 25 de novembro de 2020

Maxine é uma solução de aprendizado de máquina na nuvem que reduz a quantidade de dados transmitidos, deduzindo e gerando as partes que faltam.

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

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

Carlos L. A. da Silva - 20 de novembro de 2020

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

Top 10 soft skills para desenvolvedores
Artigos
13 visualizações
Artigos
13 visualizações

Top 10 soft skills para desenvolvedores

Carlos L. A. da Silva - 20 de novembro de 2020

Não basta saber programar bem... confira o que as empresas também estão procurando em um profissional de desenvolvimento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como detectar um bloqueador de anúncios usando uma linha de Javascript
Dicas
17 visualizações
17 visualizações
Promoções de Jogos do Final de Semana (13/11)
Notícias
23 visualizações
23 visualizações

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

Carlos L. A. da Silva - 13 de novembro de 2020
Como extrair imagens de um documento Word/LibreOffice com inteligência
Dicas
20 visualizações
20 visualizações
Promoções de Jogos do Final de Semana (06/11)
Notícias
27 visualizações
27 visualizações

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

Carlos L. A. da Silva - 6 de novembro de 2020