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

Question

假设我有两个文本区域......

文本区 1

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

文本区域 2

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

我希望能够在 textarea 2 中的文本之后添加我在 textarea 1 中输入的文本。例如：如果我写“我的名字是乔”。在 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());
    });
});​

例子

Answer 4

演示

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

Answer 5

如果有人需要香草 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);

演示 jsfiddle