更新

Question

假设我有两个textareas ...

Textarea 1

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

Textarea 2

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

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

结果将是......

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

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

Answer 1

不需要ajax。

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

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

Answer 2

绑定到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 );
});

以下是演示：http://jsfiddle.net/agz9Y/2/

这将使第二个文本区域与第一个文本区域具有相同的内容，如果您想要在第一个文本区域中添加第一个文本区域，则可以将第一个文本的值添加到第二个而不是覆盖：

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

更新

您可以稍微更改一下，以便.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();
});

Answer 3

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

Example

Answer 4

DEMO

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

Answer 5

如果有人需要Vanilla 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

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

5 个答案:

更新