Simultaneamente escrever texto de uma área de texto para outro Textarea

votos
23

Digamos que eu tenho duas textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Eu quero ser capaz de adicionar texto a partir do que eu digitei no textarea um após o texto na textarea dois. Por exemplo: Se eu escrever Meu nome é Joe. em textarea um vai, simultaneamente, duplicar e escrever Meu nome é Joe. em textarea dois após o existente Hi There. texto.

O resultado seria ...

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

Posso fazer isso com jQuery ou eu preciso fazer isso com AJAX? Como eu iria fazer isso?

Publicado 12/04/2012 em 22:42
usuário
Em outras línguas...                            


5 respostas

votos
4

Sem ajax necessário.

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

Demonstração: http://jsfiddle.net/agz9Y/

Respondeu 12/04/2012 em 22:44
fonte usuário

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

Exemplo

Respondeu 12/04/2012 em 22:45
fonte usuário

votos
0

DEMONSTRA

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
Respondeu 12/04/2012 em 22:47
fonte usuário

votos
3

Você vai notar lag quando a ligação ao keyupevento. Quando você normalmente ligam-se ao keydownevento o valor de-área de texto ainda não mudou para que você não pode atualizar o valor da segunda área de texto de até determinar a tecla pressionada durante o keydownevento. Sorte para nós que podemos usar String.fromCharCode()para anexar a chave recém-pressionado para segunda área de texto. Isso tudo é feito para fazer o segundo update-área de texto rapidamente, sem qualquer lag:

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }
    $('.two').val( $(this).val() + key );
});​

Aqui está uma demonstração: http://jsfiddle.net/agz9Y/2/

Isso fará com que a segunda área de texto têm o mesmo conteúdo que o primeiro, se você quiser acrescentar o que está no primeiro para o segundo você pode apenas adicionar o valor do primeiro para o segundo em vez de substituir:

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }
    $('.two').val( $('.two').val() + $(this).val() + key );
});​

Aqui está uma demonstração: http://jsfiddle.net/agz9Y/3/

Atualizar

Você pode mudar isso um pouco de modo que o .twoelemento se lembra de seu próprio valor:

$('.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();
});​
Respondeu 12/04/2012 em 22:49
fonte usuário

votos
0

Se alguém precisa 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 demonstração

Respondeu 17/03/2014 em 07:54
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more