actualización de div en tiempo real desde input

Scorpiatus · #1 (**permalink**) 17/03/2011, 08:28

Hola,

Necesito que el texto de un div se actualice en tiempo real según se vaya escribiendo en un campo de texto input.

Probé algunas alternativas pero no me dieron resultado.

Para complicarlo un poco :) Necesitaría que, además, tenga una cantidad de caracteres limitada.

Soy supernovato en JS.

Se trata de un script que le mostrará al cliente cómo quedaría su texto escrito de una manera determinada.

Muchas gracias.

nachocb_66 · #2 (**permalink**) 17/03/2011, 08:41

Hola,

tienes que buscar acerca de DOM y eventos en js para reallizar lo que necesitas,

saludos.

Scorpiatus · #3 (**permalink**) 17/03/2011, 08:50

Ok, veré que encuentro.
Si alguien tuviera alguna muestra de algo similar, sería genial.
Gracias nachocb_66 :)

InKarC · #4 (**permalink**) 18/03/2011, 20:20

Por cierto, tambien eres novato en HTML, ya que la cantidad de caracteres en un text input se controla desde alli, no desde javascript

Cita:

Si crees que javascript es complicado es por que no has usado jquery; eso que quieres hacer es exageradamente sencillo si lo usas.

Este es todo el codigo que necesitas

Código:

$(document).ready(function(){
	$("#nombre").keyup(function(){
		var texto_escrito = $(this).val();
		$("#un_div").html(texto_escrito);
	})
})

Un ejemplo completo funcionando (solo copia y pega y ya)

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" >

$(document).ready(function(){
	$("#nombre").keyup(function(){
		var texto_escrito = $(this).val();
		$("#un_div").html(texto_escrito);
	})
})
</script> 
</head>

<body>

<form>
<input type="text" name="nombre" id="nombre" maxlength="30" />

</form>
<br />
<div id="un_div" style="background-color:#FFC; padding:12px">_</div>


</body>
</html>

Scorpiatus · #5 (**permalink**) 19/03/2011, 05:59

InKarC Muchísimas gracias!

No había pensado en JQuery, lo he usado en scripts prefabricados, pero no sabía que se podía resumir en tan poco código lo que necesitaba.
Definitivamente lo tendré que investigar.

Respecto a lo de la cantidad máxima en el input, sí, lo sabía. Pero me refería a que fuera mostrando en pantalla la cantidad de caracteres que faltan.

Creo que ya tengo una buena idea, nuevamente gracias por tomarte el tiempo para responderme!

Saludos.