Home » Web Development » jQuery » Auto-update DIV content while typing in textarea with jQuery

auto-update-div-content-while-typing-in-textarea-with-jquery

Auto-update DIV content while typing in textarea with jQuery

January 3, 2021 admin

In this tutorial, we are going to see how to auto-update div content while typing in textarea with jQuery. You can simply use jQuery’s keyup() method in combination with the val() and text() methods to automatically update the <div> element’s content, while the user types the text in a <textarea>. Check out the following example:

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Auto-update DIV content while typing in textarea</title>
		<style type="text/css">
			/* Put the CSS Style Here */
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// Put the jQuery code Here
		</script>
	</head>
	<body>
		<div class="res"></div>
		<textarea id="tarea" rows="6" cols="76" placeholder="Type something here ..."></textarea>
	</body>
</html>

jQuery Code:

$(document).ready(function() {
    $("#tarea").keyup(function() {
        // Get the current value of textarea
        var text = $(this).val();

        // Update div content
        $(".res").text(text);
    });
});

CSS Code:

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

Result

Leave a Reply Cancel reply