Foros del Web - Ver Mensaje Individual - Cambiar el label por input tiempo real click

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