同时写入文本从一个文本区到另一个文本区域 [英] Simultaneously write text from one Textarea to another Textarea

问题描述

比方说，我有两个文本域...

Let's say I have two textareas...

文本区1

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

文本2

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

我希望能够从我键入的文本区域之一textarea的两个文本之后添加文字。例如：如果我写的我的名字是乔。在文本区域之一，将同时复制并写上我的名字是乔。在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.

结果将是...

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

我能做到这一点与jQuery或做我需要使用AJAX做到这一点？我怎么会去这样做？

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

推荐答案

您在绑定到 KEYUP 事件通知滞后。当你通常绑定到的keydown 事件文本区域的价值尚未改变，所以，直到你确定你不能更新第二个文本区的价值关键$ P $的的keydown 活动期间pssed。我们是幸运的，我们可以用 String.fromChar code（）追加新pssed $ P $键，第二个文本区域。这是所有做迅速做出第二个文本区更新没有任何滞后：

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 );
});​

下面是一个演示： 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 );
});​

下面是一个演示： http://jsfiddle.net/agz9Y/3/

您可以在此更改了一点，所以在。二元素会记住自己的值：

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();
});​

这篇关于同时写入文本从一个文本区到另一个文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！