Convertir texto a input.

[mariomon17]

Hola a todos, queria que al hacer click en un span, por ejemplo, este se convierta en una etiqueta input.

Como podria hacerlo? Gracias

[KoswiDigital]

Hola, te dejo un ejemplo sencillísimo hecho al vuelo en jQuery (no es muy usable, pero como ejemplo sirve):

Código Javascript:

$(document).ready(function()
{
  $('.mispan').click(function()
  {
    var data = $(this).text();
    $(this).remove();
        
    $('<input class="miedit" type="text" value="'+data+'" />').appendTo('#midiv');
  });
});
 

Código HTML:

<div id="midiv">
  <span class="mispan">texto 1</span>
</div>
 

Un saludo.

[mariomon17]

Despues de dar muchisimas vueltas consegui hacer esto que me funciona suficiente:

Código Javascript:

$("").click(function() {
        var input = $('<input />', {'type': 'text', 'class': 'in', 'name': 'nombre', 'value': $(this).html()});
        $(this).parent().append(input);
    $(this).remove();
        input.focus();
})
 
$(".edit").click(function() {
        $("#"+id+" .nombrediv").html('<strong class="nombre">'+nombre+'</strong>');
        $("#"+id+" .razadiv").html('<span class="raza">'+raza+'</span>');
        $(this).hide();
    })
 

El codigo es mucho mas largo, pero borre partes de AJAX, etc.

.box-gale .nombre es el span.
Intente hacer un

Código Javascript:

$("input").blur(function() {
     ...
})
 

pero no funciono. No se si es por que es algo que se ha añadido despues, pero no funciona :S
Por lo que añadi un boton de enviar que es .edit.

Un saludo y gracias

[KoswiDigital]

Hola, veo que ya te has apañado bien ^^

Respecto al blur()... Efectivamente tendría que estar dentro de la función del evento onclick para que funcionase. El problema sería que al utilizar remove() sólo funcionaría una vez. Está claro que es posible pero hay que cambiarlo un poco.

Cualquier cosa por aquí andamos.


Un saludo.

[mariomon17]

Metiendo blur() dentro de la function de click() si funciona, pero es cierto, solo una vez.

Un saludo y gracias

[KoswiDigital]

Como te decía es cuestión de no utilizar remove(). En lugar de ello, podríamos utilizar hide() para el span y remove para el input (porque sólo lo necesitamos para modificar el span).

El resultado, modificando el primer código que te puse, sería el siguiente:

Código Javascript:

$(document).ready(function()
{
    $('.mispan').click(function()
    {
        var mispan = $(this);
    var data = mispan.text();
    mispan.hide();
        
    $('<input class="miedit" type="text" value="'+data+'" />').insertBefore(mispan).focus();
        
        $('.miedit').blur(function()
        {
            var data = $(this).val();
            $(this).remove();
            
            mispan.text(data).show();
        });
    });
});
 

Código HTML:

<span class="mispan">hola mundo</span>
<br />
<span class="mispan">adiós mundo</span>
 

Ahora, en medio pues haz lo que tengas que hacer con ajax y guarda y recoge los datos convenientemente. Si lo de utilizar un botón no te convence, esta es la solución ^^


Un saludo!

[mariomon17]

Ya lo adapte de esa forma y me funciona genial

[KoswiDigital]

Me alegro de que te haya servido :)