AJAX to show text that you type

I have a one textarea's on my page which is located on the left. On the right side I have a simple div.

The textarea will later become CKeditor. Now I would like to have it so that when I type something in the textarea, that it immediately displays the text I'm typing in the div.

I just notices that Stackoverflow uses exactly what I wish to have. While I write this question I get to see what it will look like below.

How exactly is thi开发者_开发技巧s done? I've searched on Google and followed AJAX tutorials but I'm not getting tutorials that get me closer.

Thanks!

There's no AJAX in this situation. Just JavaScript processing. You set up a change event handler on the input item (textarea or other) and with JS you format that text and put the formated content inside another container.

AJAX would require server requests, while this is done entirely on the client side.

This does not relate to ajax. It's just a javascript challenge. First, you have to have a js function that handle the keydown event of the textarea, then you will change the text value (or html value) in the right div in responding to the keydown event. I think that you should learn more about javascript then jquery for easily solving this problem.

$('#text-area-id').keypress(function() { $('#div-id').html($(this).value()); });

this can probably help:)

if you are not using jquery then you can do this

create method which will be called on key press

function onChange(el)
    {
       document.getElementById('#div-id').innerHTML = el.innerText;

     }

then attach event on your textarea

<textarea onkeyup="onChange(el);"></textarea>

Here is code from a recent quesiton that needed something similar. I'm guessing you know enough JS to modify it as per your needs.

$('#names').bind('keyup', function(){
    var text = $(this).val();
    var tokens = text.split(" ");
    var output = "";
    for(int i=0; i<tokens.length; i++){
       output+= "<span>"+tokens[i]+"</span>&nbps;"; //note extra space at the end
    }
    $('#preview').innerHTML=output;
});

The original post is here.

Using jQuery

$(function(){
    $("textarea").keyup(function(){
        $("div").html($(this).val());
    });
});

http://jsfiddle.net/bxf8x/