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.
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.
<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