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

juillet 4, 2019janvier 3, 2021 Amine KOUIS Aucun commentaire

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 <div>, 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 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