Cambiar el label por input tiempo real click

fcosun · #1 (**permalink**) 22/10/2012, 22:39

Hola,

la idea es hacer click en el texto que dice prueba y este se convierte en un input text, luego al presionar click o enter este se convierte en lo ingresado, como el siguiente ejemplo, muestro el codigo de tengo.

no me funciona que podra ser ?.

Código Javascript:

Ver original<script language="javascript">
 
function prueba(){
    texto = document.getElementById("cambio").value
    alert(texto);
}
 
</script>
 
<label id="cambio" onclick="prueba"> Prueba </label> de cambio de texto <br>

Este es mi ejemplo visual.

dalttony · #2 (**permalink**) 23/10/2012, 00:46

Hola tengo una solucion, lo unico es que utilizo librerias de Jquery que la podes descargar en este link [URL="http://jquery.com/download/"]http://jquery.com/download/[/URL] por si no las tienes, espero que te pueda servir

codigo Javascrip

Código Javascript:

Ver originalvar input="<input type='text' id='p'/>"//agregamos el el cuadro de texto
            var label ="<label id='gu'>Se ha guardado lo que ha escrito</label>" //el label que indica que se guardo
            //evento del click del 
            $("#cambio").click(function(){
                
                $("#"+this.id).empty();//borramos el label que dice prueba
                $("#cuadro").prepend(input);//agrgamos lca caja
                var inp=$("#p")//obtenemos el selector
                inp.keydown(function(e){//evento
                    var code= e.keyCode;//obtenemos el codigo del enter
                    if (code==13)
                    {
                            $("#cuadro").prepend(label);//agregamos
                            $("#gu").css("background-color","#FF0");
                            alert($("#gu").text)
                            $("#"+this.id).remove();//quitamos el cuadro
                    }
                }
                );
            });

Codigo Html

Código HTML:

Ver original<div id="cuadro"><label id="cambio" onclick="prueba();" > Prueba </label> de cambio de texto <br></div>

Espero que te sirva

emprear · #3 (**permalink**) 23/10/2012, 11:41

Vamos a modificar un poco lo de @dalttony, para que funcione correctamente.
Ya que estamos con jQuery vamos a evitarnos eso de utilizar el innecesario evento onclick en el tag label llamando a una función, que lo único que consigue es duplicar el efecto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){ 
var input="<input type='text' title='ingrese el nuevo texto y presione enter' id='p'\/>"//agregamos el el cuadro de texto
            var label ="<label id='gu'>Se ha guardado lo que ha escrito<\/label>" //el label que indica que se guardo
            //evento del click del 
            $("#cambio").click(function(){
                
                $("#"+this.id).empty();//borramos el label que dice prueba
                $("#cuadro").prepend(input);//agrgamos lca caja
                var inp=$("#p")//obtenemos el selector
                inp.keydown(function(e){//evento
                    var code= e.keyCode;//obtenemos el codigo del enter
                    if (code==13)
                    {
                            $("#cuadro").prepend(label);//agregamos
                            $("#gu").css("background-color","#FF0");
                      //      alert($("#gu").text)
                            $("#"+this.id).remove();//quitamos el cuadro
                    }
                }
                );
            });
 
            });
//]]>
</script>
</head>
<body>
<div id="cuadro"><label id="cambio" style="cursor: pointer; color: red;" title="Click aquí para cambiar">Prueba</label> de cambio de texto<br /></div>
</body>
</html>

Demo
http://foros.emprear.com/jquerye/labelxinput.html

Saludos