Texto editable Javascript

tazzwt · #1 (**permalink**) 16/12/2010, 20:54

Hola como se puede hacer ese efecto, se le hace doble click a un texto normal y este se convierte en editable. Luego se hace click en otro lado el texto queda editado..

Como la siguiente imagen:

Código HTML:

Ver original<script type='text/javascript'>
function editar(mitexto) {
nombre = document.getElementById(texto).style.display = 'hidden';
 
}
</script>
 
 
<input type="text" id="texto" onDblClick=editar()>

quimfv · #2 (**permalink**) 17/12/2010, 06:35

Una de las muchas soluciones posibles....

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function editar(obj){
    var id=obj.id.substr(1);
    var tOriginal=obj.innerHTML;//<--opcionaal
    document.getElementById("i"+id).style.display="";
    document.getElementById("in"+id).value=tOriginal;//<--opcional
    document.getElementById("t"+id).style.display="none";
}
function pegar(obj){
    var id=obj.id.substr(2);
    var tEditado=obj.value;
    document.getElementById("t"+id).style.display="";
    document.getElementById("t"+id).innerHTML=tEditado;
    document.getElementById("i"+id).style.display="none";
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Nombre:&nbsp;</td>
    <td><span id="tnombre" onDblClick="editar(this)">Juan</span><span id="inombre" style="display:none"><input name="innombre" type="text" id="innombre" onBlur="pegar(this)"></span></td>
  </tr>
  <tr>
    <td>Apellido:&nbsp;</td>
    <td><span id="tapellido" onDblClick="editar(this)">Perro</span><span id="iapellido" style="display:none"><input name="inapellido" type="text" id="inapellido" onBlur="pegar(this)"></span></td>
  </tr>
</table>
 
</body>
</html>