Mise à jour automatique du contenu div lors de la saisie dans un textarea avec jQuery

Vous pouvez utiliser la méthode keyup() de jQuery en combinaison avec les méthodes val() et text() pour mettre à jour automatiquement le contenu de l’élément, pendant que l’utilisateur écrit le texte dans une <textarea>. Découvrez l’exemple suivant:
 
 

Code HTML :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mise à jour automatique du contenu div lors de la saisie dans un textarea</title>
		<style type="text/css">
			/* Mettez le code css ici. */
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// Mettez le code jQuery ici.
		</script>
	</head>
	<body>
		<div class="res"></div>
		<textarea id="tarea" rows="6" cols="76" placeholder="Saissez quelque chose ici ..."></textarea>
	</body>
</html>

 

Code jQuery :
$(document).ready(function() {
    $("#tarea").keyup(function() {
        // Récupérer la valeur actuelle de textarea
        var text = $(this).val();

        // Modifier le contenu de div
        $(".res").text(text);
    });
});

 
 

Code CSS:
.res {
    background-color: #e1e1f1;
    border: 1px solid #000;
    padding: 5px;
    min-height: 50px;
    margin: 25px 0;
}
Résultat

 
QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *