Modifier le texte du paragraphe dynamiquement avec jQuery?
Je veux prendre les informations tapées dans un champ de texte et les afficher dans un paragraphe ailleurs sur la page. Fondamentalement, exactement ce qui se passe ci-dessous comme je tape ceci (allez poster une question et commencez à taper dans la zone de texte principale et vous verrez ce que je veux dire).
Une idée de comment faire cela? La page a tellement de JavaScript que je ne trouve pas comment ils l'ont fait.
3 réponses
Je pense que vous cherchez ceci.
Voici comment votre code html devrait ressembler:
<textarea id="txt" style="width:600px; height:200px;"></textarea>
<p id="preview"></p>
Et jQuery:
$(function(){
$('#txt').keyup(function(){
$('#preview').text($(this).val());
});
});
Cela saisit la valeur de textarea sur son événement keyup et plus tard le texte du paragraphe est modifié (text() méthode) avec celui de textarea $(this).val().
Voici un exemple qui devrait fonctionner -
<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>
Désolé pour les styles supplémentaires-ne peut pas m'aider. Jquery .change() ne changera pas tant que différents événements ne seront pas déclenchés, .live() et .bind() sont ce que vous voulez. Il y a aussi la .attr ("value") partie qui fait parfois de la magie supplémentaire que je ne comprends pas totalement - mais elle reste à jour. Bonne chance!
J'utiliserais quelque chose comme keyup et mettrais à jour l'affichage chaque fois qu'une clé est libérée. Vous devrez peut-être également gérer l'événement de changement au cas où quelqu'un collerait quelque chose dans la boîte.
<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>
Aussi, vous pouvez regarder l'éditeur WMD , qui est ce que so utilise. Il fait plus que vous demandez, mais vous pourriez obtenir quelques idées de celui-ci.