HTML Cuadro de texto editable

RealTincho · 26/12/2011, 23:38

Hola, estaba buscando algún HTML en donde tenga un cuadro de texto y un boton (o dos) en donde al clickar en ella, el texto dentro del cuadro pueda ser modificada, y al volver al clickar el boton (u otro) se vuelva a blokear manteniendo el texto modificado e impidiendo qe esta sea nuevamente modificada :)
Si alguien sabe como hacerla, le agradecería mucho qe me ayude!!
Desde ya muchas Gracias :)
Saludos! :D

emprear · 27/12/2011, 06:03

Tenes que cambiar las propiedades con javascript
algo asi (le agregué algunos detalles para resaltar el estado on/off)

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" />
 
<style type="text/css">
/*<![CDATA[*/
 
input#texto {
color: #000;
border: solid 1px #000;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function cambiarestado(){
 
var valor = document.getElementById('texto').readOnly;
if (valor == false){
document.getElementById('texto').readOnly = true;  
document.getElementById('texto').style.border = 'solid 1px #666';
document.getElementById('texto').style.color = '#666';
document.getElementById('cambia').value = 'habilitar';  
}else{
document.getElementById('texto').readOnly = false;  
document.getElementById('texto').style.border = 'solid 1px #000';
document.getElementById('texto').style.color = '#000';
document.getElementById('cambia').value = 'deshabilitar';   
}
 
}
//]]>
</script>
</head>
<body>
<form action="#">
<p>
<input type="text" id="texto" value="" />
<input type="button" value="deshabilitar" id="cambia" onclick="cambiarestado();" /> <input type="reset" value="borrar" /> 
</p>
</form>
</body>
</html>

Saludos

RealTincho · 27/12/2011, 12:48

Es justo lo qe estaba buscando! Pero el problema es qe al cargar de nuevo la página, el contenido del cuadro se vuelve a borrar, y yo necesito qe ese contenido permanezca allí, y visible para todos... Sabes qe se puede hacer? :S

Saludos.!

emprear · 27/12/2011, 13:00

lo que yo hice es solo para habilitar/deshabilitar, no tengo idea de como funciona tu aplicación, si ese texto se pasa por post en un form, podés almacenarlo en una variable y volverlo a mostrar. Pero sigue sin estar muy claro el concepto, visible para quienes? para cada usuario que entra a la página, que en todo caso vería el texto que el modificó, o para todos, que todos vean lo que puso el otro... y si dos usuarios cambian ese texto... parece trabalenguas verdad?

Por otro lado, si recargás la página el texto sigue ahi, solo cuando se ingresa nuevamente a la pagina se borra, que no es lo mismo que recargarla

SAludos

RealTincho · 27/12/2011, 13:26

Qe sea Visible para todos, osea qe si alguien cambia el texto lo vean todos. con respecto a lo qe dices "y si dos usuarios cambian ese Texto" en realidad solo lo pueden cambiar los staff de la página desde otra sección dentro de la misma página.

Despues, a lo qe me referí cuando dije qe al recargar se borraba, era qe al Actualizar (F5) ese contenido se borraba.

Creo qe hay qe hacer lo qe me dijiste, almacenarlo en una variable y volverlo a mostrar. Qe opiinas¿

emprear · 27/12/2011, 13:39

Primero, tras ingresar un texto, con F5 no se borra.
Pero si lo cambian desde otra sección, que objeto tiene ese campo de texto?
Por lo de la variable, deberías usar php, o tal vez cookies con javascript, aunque tené en cuentaque el valor máximo para una cookie es de 4kb, eso incluye el valor mas los datos de expiración, nombre , etc

Saludos

RealTincho · 27/12/2011, 13:59

El objeto de ese campo de texto es mostrar digamos qe... "Noticias Breves" por así decirlo, o como los Estados en Facebook.. un peqeño texto escrito x los staff (Por eso digo qe lo cambian desde otra sección) qe puedan leerlos todos los usuarios, qe sería, por ejemplo: "Martes DJ Tincho" qe no superan 3 palabras. Me gustaría hacer eso de Cookies con JavaScript pero nose como hacerlo... Y nada de php Porfavor :S
Podrias ayudarme con eso?
Saludos.

emprear · 27/12/2011, 14:03

http://ketari.wordpress.com/2006/01/...on-javascript/
Saludos

aleksdj · 29/12/2011, 11:25

Aqui os dejo un enlace para uso de cookies con javascript por si os viene bien http://www.howtocreate.co.uk/tutorials/javascript/cookies es sencillo y facil de entender (en ingles eso si)

RealTincho · 29/12/2011, 12:20

Muchas Gracias! :D