In this post, we will learn how to auto update div content while typing in textarea using jQuery. So how we can do this, we will learn in this post. 


How To Auto Update Div Content While Typing In Textarea Using jQuery ?


Auto Update Div Content While Typing In Textarea

When we are writing something in the text area and we want that what we are writing should be visible in any div as well, then for this we will use the  keyup()  method of jQuery.

With this method, we will also use the  val()  and  text()  methods. How we will use all these methods, so let us see it through an example.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Auto Update Div Content While Typing In Textarea Using jQuery ?</title>


<style>
#outputText {
border: 1px solid #b7b7b7;
padding: 10px;
min-height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<form>
<textarea id="textArea" rows="5" cols="60" placeholder="Type here..."></textarea>
</form>
<div id="outputText"></div>

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
$("#textArea").keyup(function(){
// fetch value from textarea
var text = $(this).val();

// set text in div
$("#outputText").text(text);
});
});
</script>
</body>
</html> code-box


Summary

In this post we learned how to auto update div content while typing in textarea using jQuery. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.  

Post a Comment

Previous Post Next Post