Al mismo tiempo escribir el texto de un Área de texto a otro Textarea

Question

Al mismo tiempo escribir el texto de un Área de texto a otro Textarea

votos

23

Digamos que tengo dos áreas de texto ...

1 Área de texto

<textarea class=one></textarea>

2 Área de texto

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

Quiero ser capaz de añadir texto a partir de lo que he escrito en el área de texto uno a continuación del texto en el área de texto dos. Por ejemplo: Si escribo Mi nombre es Joe. en el área de texto se va a duplicar de forma simultánea y escribir Mi nombre es Joe. en el área de texto dos después de la existente Hola allí. texto.

El resultado sería ...

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

¿Puedo hacer esto con jQuery o tengo que hacer esto con AJAX? ¿Cómo voy a ir haciendo esto?

jquery ajax

Publicado el 12/04/2012 a las 22:42
por usuario Joe

En otros idiomas...

5 respuestas

votos

4

No Ajax requiere.

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

Demostración: http://jsfiddle.net/agz9Y/

Respondida el 12/04/2012 a las 22:44
fuente por usuario AlienWebguy

votos

0

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

Ejemplo

Respondida el 12/04/2012 a las 22:45
fuente por usuario The Alpha

votos

0

MANIFESTACIÓN

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

Respondida el 12/04/2012 a las 22:47
fuente por usuario coder

votos

0

Si alguien necesita vainilla 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 demostración

Respondida el 17/03/2014 a las 07:54
fuente por usuario Slawe

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

Usted se dará cuenta de retraso cuando se une al keyupevento. Cuando normalmente asocie a la keydowncaso de que el valor del texto-área todavía no ha cambiado por lo que no puede actualizar el valor de la segunda zona de texto hasta que determine la tecla pulsada durante el keydownevento. Por suerte para nosotros podemos utilizar String.fromCharCode()para anexar la clave recién pegada al segundo texto-zona. Todo esto se hace para hacer la segunda actualización de texto de área rápidamente y sin ningún tipo de retraso:

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

He aquí una demostración: http://jsfiddle.net/agz9Y/2/

Esto hará que el segundo texto-zona tienen el mismo contenido que la primera, si desea anexar Contenido de la primera a la segunda basta con añadir el valor de la primera a la segunda en lugar de sobrescribir:

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

He aquí una demostración: http://jsfiddle.net/agz9Y/3/

Actualizar

Puede cambiar esto un poco por lo que el .twoelemento se acuerda de su propio 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();
});