Show live preview of HTML textarea with JavaScript

In this tutorial, you are going to see the simple JavaScript code snippets which will show the live preview of an HTML textarea input field.

before we are going to do it, let’s first see the HTML code below:

<textarea id="textcontent" placeholder="Type Text..." rows="12" cols="50"></textarea>
<div style="width: 380px;" id="showtext"></div>

The above HTML code contains a textarea where you can write some text with the id “textcontent”. Below the textarea, you can see a div element which has the id “showtext”. The live preview of the textarea in the time of typing will be displayed in the div element. But the most important before it will work is that we need the JavaScript code.

How to get value from input box in JavaScript?

Retrieve the width of div element in JavaScript

Below is the JavaScript code that will show the live preview of the HTML textarea at the time of writing the text:

var textcontent = document.getElementById('textcontent');

  textcontent.onkeyup = textcontent.onkeypress = function(){
      document.getElementById('showtext').innerHTML = this.value;

Now let’s try it and run on your browser. You will see that it is showing the text you are typing in the text area box. You will also see that the live preview also support the HTML code inside the text area.

Convert seconds to HH-MM-SS format in JavaScript

Build Android App Using Your HTML, CSS and JavaScript Skills

Is it not so amazing and interesting? We have just done a nice thing with just a few lines of JavaScript code. Well, to me it was a nice experience when I had come to know this first time.

I hope you have also liked things tutorial and enjoyed it. please let me know about your experience in the comment box below.

2 responses to “Show live preview of HTML textarea with JavaScript”

  1. Johan Nagel says:

    Hi sir

    i need advice for my site. i want the client to be able to enter text up to 15 characters, and want this text to be displayd on an item i am selling, also i want the client to select a text color and also a font. Could you point me in the right direction

    • Saruque Ahamed Mollick says:

      Give a drop-down menu for choosing font and an HTML color picker and take input from your client through that.

Leave a Reply

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