Quiero tomar la información escrita en un campo de texto y mostrarla en un párrafo en otro lugar de la página. Básicamente, exactamente lo que está sucediendo a continuación, ya que escribo esto (ve a publicar una pregunta y comienza a escribir en el cuadro de texto principal y verás a qué me refiero).¿Cambiar texto de párrafo dinámicamente con jQuery?
¿Alguna idea de cómo hacer esto? La página tiene tanto JavaScript. No puedo encontrar cómo lo hicieron.
I think you are looking for this.
Así es como su html debe verse como:
<textarea id="txt" style="width:600px; height:200px;"></textarea>
<p id="preview"></p>
y jQuery:
$(function(){
$('#txt').keyup(function(){
$('#preview').text($(this).val());
});
});
Este coge el valor de textarea en su caso keyup y más tarde el texto del párrafo se cambia (método text()) con el de textarea$(this).val().
Usaría algo así como la configuración y actualizar la pantalla cada vez que se suelta una tecla. Es posible que también deba manejar el evento de cambio en caso de que alguien pegue algo en el cuadro.
<div id="container">
<textarea id="textfield"></textarea>
<p id="displayArea"></p>
</div>
<script type="text/javascript">
var display = $('#displayArea');
$('#textfield').keyup(function() {
display.text($(this).val());
}).change(function() {
display.text($(this).val());
});
</script>
Además, usted podría mirar a la WMD editor, que es lo que utiliza SO. Hace más de lo que está pidiendo, pero podría obtener algunas ideas de él.
Aquí hay un ejemplo que simplemente debe trabajar -
<html>
<head>
<style>
#typing{background-color:;}
#display{background-color:#FFEFC6;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<div id="typing">
<input type="text" name="typing" value="" id="typing_input" style="height:100px;width:300px;">
</input>
</div>
<div id="display">
<p id="typing_display"></p>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
$('#typing_input').bind("keypress keydown", function(event) {
$('#typing_display').text($('#typing_input').attr("value"));
});
});
</script>
</body>
</html>
Lo siento por los estilos extra - no puede evitarlo. El .change() de Jquery no cambiará hasta que se disparen los diferentes eventos, .live() y .bind() son lo que quieres. También está la parte .attr ("valor") que a veces extrae magia que no entiendo del todo, pero se mantiene actualizada. ¡La mejor de las suertes!
es posible que desee leer las preguntas frecuentes sobre lo que hace una buena respuesta: http://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-withwer-to-a-question . OMI, aunque su solución puede ser correcta, su respuesta no es particularmente útil si el enlace muere. Deberías incluir el código y una descripción en la respuesta para que pueda funcionar por sí mismo. – tvanfosson
@tvanfosson: Estoy totalmente de acuerdo contigo, tenía un poco de prisa y no podía escribir nada más porque me fui y volví ahora después de una hora, gracias por recordarme esto y sí, la explicación de cómo funciona es obligatoria y Personalmente, en segundo lugar su respuesta en realidad. Gracias de nuevo. – Sarfraz