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

Auto-update DIV content while typing in textarea with jQuery

admin 0 Comments

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
mcqMCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More

You May Also Like

how-to-get-the-value-of-a-textarea-in-jquery

How to get the value of a textarea in jQuery

admin 0
how-to-call-a-function-after-some-time-in-jquery

How to Call a Function After Some Time in jQuery

admin 0
how-to-disable-all-input-inside-a-form-with-jquery

How to disable all <input> inside a form with jQuery?

admin 0

Leave a Reply

Your email address will not be published. Required fields are marked *