Cambiar de un texto a un input type="text"

Hallking · #1 (**permalink**) 13/02/2009, 17:22

Hola a todos.
Bueno soy nuevo en esto hasi que si me equivoco corijamne estoy havierto a sujerencias.
lo que yo quiero hacer es simple es cambiar un texto por un <input type="text">
dando un clic en sima de texo me esplico
ejemplo tengo un texto que dise hola y cuando el usuario aga clic sobre el cambie a un <input type="text">.
eso es todo gracias.

javislim · #2 (**permalink**) 13/02/2009, 17:27

La verdad que no te explicas mucho se me hace imposible ayudarte.

Cita:

cambiar un texto por un <input type="text">
dando un clic en sima de texo

????

Hallking · #3 (**permalink**) 13/02/2009, 17:35

Hola
Vamos haber si puedo hace q entiendas mi idea.
Yo estoy haciendo una agenda con html y php
Y quiero q en la parte donde el usuario puede modificar los datos de sus contactos lo aga de la siguiente forma
Que cuando el de un clic en sima del nombre de contacto q podría ser javislim cambie javislim por un <input type=”text ” value=”javislim”> para q el usuario pueda modificar javislim por otro nombre ejemplo Hallking.
Dime si me entendiste la idea y gracias por tu ayuda.

javislim · #4 (**permalink**) 13/02/2009, 17:57

Puedes usar un scrip, aunque para que no te lies mucho usa un input type=”text ” y juega con la propiedad enabled que es booleana, aunque lo mas normal seria, que si un usuario quiere ver sus datos se les presentes todos enabled = false y en un boton del formulario pongas un modificar datos o algo asi donde los habilites todos , dejando asi que los modifique y dandole otra opcion de guardar o no.
pruebalo y dime si es lo que quieres sino para eso es ete foro.

Hallking · #5 (**permalink**) 13/02/2009, 18:14

gracias
pero puedo ver el scrip y podrias darme un ejemplo si no es muhca molestia.

javislim · #6 (**permalink**) 13/02/2009, 18:29

Mira aqui tienes un scrip copia todo lo de debajo en un bloc de notas y guardalo como ejemplo.html abrelo con tu explorador y veras esto lo puedes cambiar y modificar a tu antojo te recomiendo un manual de html debes conocer todas las propiedades de los objetos para poder hacer buenas practicas de programacion dime si te sirvio de algo.

<html>
<head>
</head>
<body>
<form name="forma">
Dato:
<input type="text" name = "ejemplo"><br>
<input type="checkbox" name="chk" checked onclick="JavaScript:document.forma.ejemplo.disable d =

!this.checked">Habilitar dato
</form>
</body>
</html>

ElJavista · #7 (**permalink**) 13/02/2009, 19:41

Vamos, yo si entiendo lo que que quieres hacer, eso se llama: "Formulario in situ", y es una de las formas como se aplica ajax, al parecer tú quieres la primera parte, o sea, al hacer un click sobre el dato, (yo te recomendaría doble click) este se convierta en una input type text y que contenga ese dato para poder editarlo, te faltaría la segunda parte, que al hacer enter el dato se guarde automáticamente y el input text se convierta en texto.

Bien, es interesante. Para hacer eso se requiere la manipulación de la web mediante JavaScript, haciendo uso del DOM (es complicadito) o del práctico innerHTML (no sé porque muchos lo basurean). Bien, debes saber JavaScript. Si no sabes, aprende al menos lo mínimo, no quiero darte un código y que respondas: "Y ese código donde tengo que ponerlo?", créeme que si pasaría eso me daría ganas de decirte que lo pongas en tu bolsillo. Así que para estar claros, responde si sabes al menos lo mínimo de JavaScript, si no lo sabes, en dos días podrías aprenderlo, así que no tendrías porque desesperarte. Suerte!

Hallking · #8 (**permalink**) 13/02/2009, 19:42

Primero disculpame la molestia.

parese q no me as entendido Bien.

mira este codigo q as algo parecido a lo q quiero pero el problema es q cuando doy clic en el <input type="text" value="xxxxxx"> no puedo escribir pues vuelve a mostrarme el texto anterior y lo que yo quiero es q me permita escribir dentro del <input> y cuando aga clic fuera el <input> buelva a su estado normal.

Cual quiel cosa me me escribes.

<html>
<head>
<script type="text/javascript">
var txt=['En un lugar de la Mancha de cuyo nombre no quiero acordarme',innerHTML='<input type="text" name="hallking" value="hallkin">'];
var val=false;
function cambiar(obj) {
val = !val;
obj.innerHTML = (val) ? txt[1] : txt[0];
}
</script>
</head>
<body>
<span onClick="cambiar(this)">En un lugar de la Mancha de cuyo nombre no quiero acordarme</span>
</body>
</html>

si eso mismo es lo q quiero ElJavista y tengo unas nociones basicas de javascript si quieres pudes pener el codigo gracias

ElJavista · #9 (**permalink**) 15/02/2009, 13:53

Genial, si son nociones básicas, con eso basta. Bueno, entonces te explico. Tienes que usar el práctico y basureado innerHTML, de este modo:

Digamos tienes esto en tu pagina:

<div id="divData" ondblClick="setInput()">Dato</div>

Con innerHTML puedes reemplazar el contenido del div divData, de este modo:

Código:

function setInput() {
              var dvd = document.getElementById("divData");
              var val = dvd.innerHTML;
              dvd.innerHTML= "<input value=\""+val+"\" onkeyup=\"if (event.keyCode == 13)savInput(this.value)\">";

function savInput(val) {
          var url = "pross.php?savData="+escape(val)+"&rnd="+Math.random();
         //alert(url);
         ajx.open("GET", url, true);

         ajx.onreadystatechange = function() {
             if (ajx.readyState == 4) {
                var rst = ajx.responseText;
                if (rst == "1") {
                   document.getElementById("divData").innerHTML = val;
                }
             }
         }
         ajx.send(null);
}

Esto es una forma de usar ajax, hay otras, tendrás que buscar un manual que te aclaren las cosas sobre ajax, yo nomás te doy esto, si buscas un manual verás que falta una parte en PHP, bueno, prueba, busca un manual y haces las preguntas. Suerte!