Contemporaneamente scrivere il testo da una Textarea all'altro Textarea

voti
23

Diciamo che ho due textarea ...

Textarea 1

<textarea class=one></textarea>

Textarea 2

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

Voglio essere in grado di aggiungere il testo da quello che ho scritto in textarea uno dopo il testo nella textarea due. Per esempio: Se scrivo Il mio nome è Joe. in textarea uno sarà simultaneamente duplicare e scrivere Il mio nome è Joe. in textarea due dopo l'attuale Hi There. testo.

Il risultato sarebbe ...

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

Posso fare questo con jQuery o devo farlo con AJAX? Come potrei fare per fare questo?

È pubblicato 12/04/2012 alle 22:42
dall'utente
In altre lingue...                            


5 risposte

voti
4

No ajax richiesto.

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

Demo: http://jsfiddle.net/agz9Y/

Risposto il 12/04/2012 a 22:44
fonte dall'utente

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

Esempio

Risposto il 12/04/2012 a 22:45
fonte dall'utente

voti
0

DEMO

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
Risposto il 12/04/2012 a 22:47
fonte dall'utente

voti
3

Noterete ritardo quando il legame con la keyupmanifestazione. Quando normalmente legano al keydowncaso in cui il valore del testo-zona non è ancora cambiato, quindi non è possibile aggiornare il valore del secondo testo-zona fino a determinare il tasto premuto durante l' keydownevento. Per fortuna noi possiamo usare String.fromCharCode()per aggiungere la chiave appena premuto per il secondo testo-zona. Tutto questo è fatto per rendere il secondo aggiornamento del testo-spazio in modo rapido, senza alcun ritardo:

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

Ecco una demo: http://jsfiddle.net/agz9Y/2/

Questo renderà il secondo testo-zona hanno lo stesso contenuto come il primo, se si desidera aggiungere cosa c'è nel primo al secondo si può semplicemente aggiungere il valore del primo al secondo, piuttosto che sovrascrivere:

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

Ecco una demo: http://jsfiddle.net/agz9Y/3/

Aggiornare

È possibile modificare questo un po 'in modo che .twol'elemento ricorda il proprio valore:

$('.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();
});​
Risposto il 12/04/2012 a 22:49
fonte dall'utente

voti
0

Se qualcuno ha bisogno di 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 demo

Risposto il 17/03/2014 a 07:54
fonte dall'utente

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