Foros del Web » Programando para Internet » Javascript »

Texto editable Javascript

Estas en el tema de Texto editable Javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/12/2010, 20:54
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años
Puntos: 11
Texto editable Javascript

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
  1. <script type='text/javascript'>
  2. function editar(mitexto) {
  3. nombre = document.getElementById(texto).style.display = 'hidden';
  4.  
  5. }
  6.  
  7.  
  8. <input type="text" id="texto" onDblClick=editar()>
__________________
Libro de HTML 5 + codigo fuente bajar aqui.
  #2 (permalink)  
Antiguo 17/12/2010, 06:35
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: Texto editable Javascript

Una de las muchas soluciones posibles....

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <title>Documento sin t&iacute;tulo</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <script language="JavaScript" type="text/JavaScript">
  5. function editar(obj){
  6.     var id=obj.id.substr(1);
  7.     var tOriginal=obj.innerHTML;//<--opcionaal
  8.     document.getElementById("i"+id).style.display="";
  9.     document.getElementById("in"+id).value=tOriginal;//<--opcional
  10.     document.getElementById("t"+id).style.display="none";
  11. }
  12. function pegar(obj){
  13.     var id=obj.id.substr(2);
  14.     var tEditado=obj.value;
  15.     document.getElementById("t"+id).style.display="";
  16.     document.getElementById("t"+id).innerHTML=tEditado;
  17.     document.getElementById("i"+id).style.display="none";
  18. }
  19. </head>
  20. <table border="0" cellspacing="0" cellpadding="0">
  21.   <tr>
  22.     <td>Nombre:&nbsp;</td>
  23.     <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>
  24.   </tr>
  25.   <tr>
  26.     <td>Apellido:&nbsp;</td>
  27.     <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>
  28.   </tr>
  29.  
  30. </body>
  31. </html>
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Última edición por quimfv; 17/12/2010 a las 06:41

Etiquetas: editable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:11.