Question

Let’s say I have two textareas…

Textarea 1

<textarea class="one"></textarea>

Textarea 2

<textarea class="two">Hi There.</textarea>

I want to be able to add text from what I typed in textarea one after the text in textarea two. For example: If I write “My name is Joe.” in textarea one it will simultaneously duplicate and write “My name is Joe.” in textarea two after the existing “Hi There.” text.

The result would be…

<textarea class="2">Hi There. My name is Joe.</textarea>

Can I do this with jQuery or do I need to do this with AJAX? How would I go about doing this?

Answer 1

You will notice lag when binding to the keyup event. When you normally bind to the keydown event the value of the text-area has not yet changed so you can’t update the value of the second text-area until you determine the key pressed during the keydown event. Lucky for us we can use String.fromCharCode() to append the newly pressed key to the second text-area. This is all done to make the second text-area update quickly without any lag:

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }
    $('.two').val( $(this).val() + key );
});​

Here is a demo: http://jsfiddle.net/agz9Y/2/

This will make the second text-area have the same content as the first one, if you want to append what’s in the first to the second you can just add the value of the first to the second rather than overwriting:

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }
    $('.two').val( $('.two').val() + $(this).val() + key );
});​

Here is a demo: http://jsfiddle.net/agz9Y/3/

Update

You can change this a bit so the .two element remembers its own value:

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }

    //notice the value for the second textarea starts with it's data attribute
    $('.two').val( $('.two').data('val') + ' -- ' + $(this).val() + key );
});

//set the `data-val` attribute for the second textarea
$('.two').data('val', '').on('focus', function () {

    //when this textarea is focused, return its value to the remembered data-attribute
    this.value = $(this).data('val');
}).on('change', function () {

    //when this textarea's value is changed, set it's data-attribute to save the new value
    //and update the textarea with the value of the first one
    $(this).data('val', this.value);
    this.value = this.value + ' -- ' + $('.one').val();
});​