How to display the value of the input in DIV in real-time with jQuery

January 1, 2021 admin

In this tutorial, we are going to see how to display the value of the input in DIV object in real-time with jQuery. You can bind the event during input to a text box using the on() method to detect any modification to it.

The following example displays the entered value in real-time when you type something in the input text.

How to display the value of the input in DIV in real-time with jQuery

<!DOCTYPE html>
<html>
	<head>
		<title>Display the value of the input in DIV object in real-time</title>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#inText").on("input", function(){
					$("#output").text($(this).val());
				});
			});
		</script>
	</head>
	<body>
		<p><input type="text" placeholder="Enter a value here" id="inText"></p>
		<div id="output"></div>
	</body>
</html>