Textarea Preview Div

I am trying to script a textarea preview (like stackoverflow) that shows in a div automatically. I have created a script, but it does not seem to be working. If anybody could help

Solution 1:

Your question is vague, but maybe a few pointers will help.

• You'll want to update your target div every time the user types a character. This is the onkeyup handler (or onkeydown, depending on your intended UX - probably the former).
• Do you want to retain any HTML your user enters in the text area? If so, you'll want to update the innerHTML property of your target div. If you want to update just the text, change the innerText property.

A quick and dirty example using jQuery:

$("textarea#my_input").bind('keyup', function() {
    $("div#target").text($(this).val());
}

As requested, in vanilla JavaScript:

document.getElementById("my_input").onkeyup = function() {
    document.getElementById("target").innerText = this.value;
}

Solution 2:

If you want to show whatever is typed in the textarea in the div below it.

You can work with Jquery.keypress() function.

Sample Fiddle.

This is just a starting point.You can alter it to suit your requirements.

For further reference Jquery .keypress()