Одновременно писать текст из одного TEXTAREA другого TEXTAREA

Question

Одновременно писать текст из одного TEXTAREA другого TEXTAREA

голоса

23

Скажем, у меня есть два ... текстовые области

Textarea 1

<textarea class=one></textarea>

Textarea 2

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

Я хочу, чтобы иметь возможность добавлять текст из того, что я набрал в текстовом поле один за текст в текстовом поле два. Например: Если я пишу «Меня зовут Джо.» в текстовом поле один будет одновременно дублировать и писать «Меня зовут Джо.» в текстовое поле два после существующего «Привет Там.» текст.

Результат был бы ...

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

Могу ли я сделать это с помощью JQuery или мне нужно сделать это с помощью AJAX? Как бы я идти об этом?

jquery ajax

Задан 12/04/2012 в 22:42
пользователем Joe

На других языках...

5 ответов

голоса

4

Не требуется Аякса.

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

Демонстрация: http://jsfiddle.net/agz9Y/

Ответил 12/04/2012 в 22:44
источник пользователем AlienWebguy

голоса

0

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

пример

Ответил 12/04/2012 в 22:45
источник пользователем The Alpha

голоса

0

DEMO

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

Ответил 12/04/2012 в 22:47
источник пользователем coder

голоса

0

Если кто-то нужен 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);

демо jsfiddle

Ответил 17/03/2014 в 07:54
источник пользователем Slawe

Jasper · Accepted Answer · 2012-04-12 22:49

Вы заметите задержки при привязке к 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();
});