同时将文本从一个Textarea写入另一个Textarea

Let's say I have two textareas...

假设我有两个textareas ...

Textarea 1

Textarea 1

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

Textarea 2

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.

我希望能够在textarea二中的文本之后添加我在textarea中键入的文本。例如：如果我写“我的名字是乔。”在textarea一个它将同时复制并写“我的名字是乔。”在textarea两个现有的“Hi There”之后。文本。

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?

我可以使用jQuery执行此操作，还是需要使用AJAX执行此操作？我该怎么做呢？

5 个解决方案

#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:

绑定到keyup事件时，您会注意到滞后。当您正常绑定到keydown事件时，文本区域的值尚未更改，因此在确定keydown事件期间按下的键之前，您无法更新第二个文本区域的值。幸运的是，我们可以使用String.fromCharCode（）将新按下的键附加到第二个文本区域。这样做是为了使第二个文本区域快速更新而没有任何延迟：

$('.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/

这是一个演示：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/

这是一个演示：http：//jsfiddle.net/agz9Y/3/

Update

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

您可以稍微更改一下，以便.two元素记住它自己的值：

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

#2

No ajax required.

不需要ajax。

$('.one').on('keyup', function(){
    $('.two').html( $(this).val() );
});

Demo: http://jsfiddle.net/agz9Y/

演示：http：//jsfiddle.net/agz9Y/

#3

​$(function(){
    $('textarea.one').on('keyup', function(e){
        $('textarea.two').val($(this).val());
    });
});​

Example

例

#4

DEMO

DEMO

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })

#5

IF someone need Vanilla JS

如果有人需要香草JS

var __one = document.querySelector('.one'),
    __two = document.querySelector('.two'),
    __handler = null;


__handler = function(e)
{

    e.preventDefault();

    __two.innerHTML = this.value;

}

__one.addEventListener('keyup', __handler);

demo jsfiddle

演示jsfiddle