Então, to precisando transformar uma texto que está dentro de uma tag HTML em input text para editar ela. Qual melhor forma para fazer isso ?
Exemplo: http://www.codigopronto.com/codigos/Texto-editavel-com-JavaScript.php
Então, to precisando transformar uma texto que está dentro de uma tag HTML em input text para editar ela. Qual melhor forma para fazer isso ?
Exemplo: http://www.codigopronto.com/codigos/Texto-editavel-com-JavaScript.php
Que tal usar uma div
(ou p
, span
, você que sabe) de conteúdo editável? Existe um atributo só para isso. Veja
<p contenteditable="true">Este texto é editável. Clique aqui e veja funcionando.</p>
Acho que não fica mais fácil do que isso.
a melhor forma de fazer isso é com javascript substituindo o campo de exibindo em um input, em seu exemplo já tem o javascript:
window.onload = function(){
function editTitle(){
var title = document.getElementsByTagName('h1')[0];
var span = title.firstChild;
span.onmouseover = function(){
this.title = 'Clique para editar o texto';
this.style.background = '#f5f5f5';
}
span.onmouseout = function(){
this.title = '';
this.style.background = '';
}
span.onclick = function(){
var textoAtual = this.firstChild.nodeValue;
var input = '<input type="text" name="1" value="'+textoAtual+'">';
this.innerHTML = input;
var field = this.firstChild;
this.onclick = null;
this.onmouseover = null;
field.focus();
field.select();
field.onblur = function(){
this.parentNode.innerHTML = this.value;
editTitle();
}
}
}
editTitle();
}
onde em document.getElementsByTagName('h1')[0]
ele especifica o elemento que ele deseja receber o texto e substituir por um input.
var input = '<input type="text" name="1" value="'+textoAtual+'">';
nessa parte ele insere o input, pegando o textoAtual
que ele pegou no inicio da função do h1.
Caso tenha dúvida de como o código funciona comenta aqui,
deixei esse exemplo também nesse jsfiddle