Un reto: animacion en los text

derkenuke · #1 (**permalink**) 20/04/2005, 14:28

Queria proponeros un reto, por si os aburris.

Se trata de imitar esto, que esta hecho en flash (me refiero a lo de los comentarios, cuando ganan y pierden el foco los campos).

http://www.therror.com/documentos/10..._entender_ajax

De paso os podeis leer el articulo, que tampoco esta mal

salu2!

caricatos · #2 (**permalink**) 20/04/2005, 15:38

Me suena eso de los "retos"

:

No creo que sea tan difícil...
Si el value es el predeterminado y se da el foco transitar hacia la cadena vacía: onfocus="if (this.value == ' comentario ') limpiarTexto(this)"

y si el value es una cadena vacía y se pierde el foco se restaura el comentario original: onblur="if (this.value =='') restaurar(this, ' comentario ')"

Las transiciones en el texto se controlarían mediante "setTimeout"...

Tan solo es una semilla... cuando tenga más tiempo me pondré las pilas para hacer una "chapucilla"

Saludos

renton · #3 (**permalink**) 20/04/2005, 17:07

No se lo del reto, pero el artículo está de puta madre!!!!

Carlitos · #4 (**permalink**) 21/04/2005, 10:19

Hola

He oido reto? Jeje.

Aquí dejo una chapucilla, que se podría adaptar a lo que quieres.

Código:

<script>
cad="abcdefghijklmnsopqrstuvwxyz123456789@#()"
lngt=cad.length
function muestra(abc)
{
 pp=abc
 document.getElementById('pepe').value=""
 for (a=0;a<abc.length;a++)
  {
  hij=document.getElementById('pepe').value
  letra=pp.charAt(a)
  for (b=0;b<lngt;b++)
   {
    matrix=cad.charAt(b)
    if (letra==matrix) b=lngt+1
    if (b==lngt-1 && letra!=matrix) matrix=letra
    document.getElementById('pepe').value=hij+matrix
   }
 }
}
</script>
<input type="text" id="pepe" onblur="muestra(this.value)">

Escribe algo y haz que pierda el foco.
Pruébalo pulsando aquí.

Un saludete.

caricatos · #5 (**permalink**) 21/04/2005, 13:34

Bien Carlitos

... aunque no sé porqué no me funciona en explorer (en firefox se ve muy bien)...

Aunque sabes que soy un pésimo testeador de código

Saludos

Carlitos · #6 (**permalink**) 21/04/2005, 15:09

Andá. Pues es verdad. En explorer no funciona. Yo sólo lo había probado en Firefox. Mañana lo miro a ver qué pasa. Que ahora me voy a dormir.

Saluditos.

caricatos · #7 (**permalink**) 22/04/2005, 00:53

Hola otra vez:

Una versión con retardo, parecida:

Código:

<html>
	<head>
		<script type="text/javascript">

			function limpiarTexto(miId)	{
				yo = document.getElementById(miId);
				if (yo.value != "")
					yo.value = yo.value.substring(1);
				if (yo.value != "")
					setTimeout("limpiarTexto('" + miId + "')", 100);
			}

			function restaurar(miId, que)	{
				yo = document.getElementById(miId);
				yo.value += que.charAt(yo.value.length);
				if (yo.value != que)
					setTimeout("restaurar('" + miId + "', '" + que + "')", 100);
				
			}
		</script>
	</head>
	<body>
		<form>
		<textarea id="pepe" size="50"
			onfocus="if (this.value == ' comentario ') limpiarTexto(this.id)"
			onblur="if (this.value != ' comentario ') restaurar(this.id, ' comentario ')"
		> comentario </textarea>
		<input type="text" id="paco" size="50" value=" url "
			onfocus="if (this.value == ' url ') limpiarTexto(this.id)" 
			onblur="if (this.value != ' url ') restaurar(this.id, ' url ')"
		/>
		</form>
	</body>
</html>

Saludos

Carlitos · #8 (**permalink**) 22/04/2005, 07:48

Bien, Caricatos.