Hoje, mexendo em um trabalho que fiz há algum tempo, redescobri essa função que considero muito útil. Com ela é possível abrir determinados elementos para edição. Deixar o usuário editar o conteúdo de um DIV ou TD por exemplo (ou qualquer um que tenha a propriedade innerHTML). Eu criei a função para um sistema em que o usuário editava dados em um XML: montava a página a partir do XML e deixava o usuário editar os textos, então remontava o XML a partir do innerHTML da página.
A idéia surgiu com uma função que encontrei nos meus garimpos, para determinar a posição exata de um elemento na página, a absPos(). Essa é uma função que está toda dentro de um for que não tem bloco de comandos, numa sintaxe legal, pouco comum. Não sei quem é o autor (displicência minha… desculpe-me por isso o autor dessa função tão legal), veja:
for(var lx = 0, ly = 0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
return { ‘x’: lx, ‘y’: ly }
}
Bem, sabendo a posição e as dimensões do elemento, bastava pegar o innerHTML, jogar em um input e colocar em cima do elemento editado. A função ficou curta e eficiente, restando o problema visual de, ao editar textos formatados, não exibir a mesma formatação do texto original. Um elemento pode ser herdeiro de uma grande quantidade de regras CSS e não consegui um meio de fazer o meu input herdar isso também.
A editInPlace depende de duas outras funções: absPos() e uma versão minha da função $ do prototype, que pega ou cria um elemento com determinado ID.
Lá vão as funções:
// editinplace.js
function editInPlace(el) {
var oriHTML = el.innerHTML;
var xy = absPos(el);
editting_element = el;
var div = $(’edit_div’,'div’);
div.innerHTML = ‘<form style="margin:0px;" onsubmit="return false;">\
<input type="text" value="’+(oriHTML == ‘[vazio]’ ? ‘’ : oriHTML)+
‘" id="edit_input" onblur="editting_element\
.innerHTML = this.value != \’\’ ? this.value : \’[vazio]\’; \
$(\’edit_div\’).style.display = \’none\’;" style="width:’+
(el.offsetWidth+2)+’px; height:’+(el.offsetHeight+2)+
‘px; border:none; background-color:transparent;" /></form>’;
editting_element.innerHTML = ‘’;
div.style.position = ‘absolute’;
div.style.width = ‘auto’;
div.style.height = ‘auto’;
div.style.top = (xy.y - 1)+’px’;
div.style.left = (xy.x - 1)+’px’;
div.style.display = ‘’;
$("edit_input").focus();
$("edit_input").select();
}
function $(id,tag,targetId) {
var ret = document.getElementById(id) || false;
if(!ret) {
ret = document.createElement(tag);
ret.id = id;
((document.getElementById(targetId) || false)
|| document.getElementsByTagName(’body’)[0]).appendChild(ret);
}
return ret;
}
function absPos(el) {
for(var lx = 0, ly = 0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
return { ‘x’: lx, ‘y’: ly }
}
Segue um exemplo de uso, supondo que o conteúdo acima está no arquivo editinplace.js:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="editinplace.js"></script>
</head>
<body>
<div onclick="editInPlace(this)">clique para editar</div>
<span onclick="editInPlace(this)">texto editável</span>
</body>
</html>
Resolvi inserir o texto ‘[vazio]’ quando o usuário deleta o texto, pois não dava para criar algo clicável sem texto…
Bem, vou ficando por aqui. Sei que fui muito sintético, mas estamos aí… comente, pergunte que eu explico.
Abraço, Cau Guanabara.
Mapa do site