Very Easy Way To Display Text As You Type

Maybe most of you guys already know how to do this, but for someone who doesn’t know yet or who wants to bookmark it for the future reference, I’m going to write a short tutorial about how to display text as you type today.

As I said, it’s very very simple to do using onkeyup + one line of javascript code. Let’s see the example first.

Click here to see the example

First create a textbox in a form.

And then we are going to write a javascript function.

This javascript is to copy the text from the textbox named “eg” and display in the place which has “display_here” id. So now we need to create a div (or span) with “display_here” id.

Lastly, we need to activate the javascript function everytime you type. It can be done by the onkeyup attribute. Many people try to use onchange. The onchange event is, however, triggered when the contents of the field changes, and it seems when the cursor is focused out of the field.

So the form field would look like this.

Overall, it would look like below.

If you think there’s any better solutions, feel free to leave your comments!