Samtidig skriver tekst fra en Textarea til en annen Textarea

Question

Samtidig skriver tekst fra en Textarea til en annen Textarea

stemmer

23

La oss si at jeg har to textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Jeg ønsker å være i stand til å legge til tekst fra det jeg skrev i textarea en etter teksten i textarea to. For eksempel: Hvis jeg skriver Mitt navn er Joe. i textarea vil det samtidig kopiere og skrive Mitt navn er Joe. i textarea to etter den eksisterende Hi There. tekst.

Resultatet ville være ...

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

Kan jeg gjøre dette med jQuery eller må jeg gjøre dette med AJAX? Hvordan skulle jeg gå om du gjør dette?

jquery ajax

Publisert på 12/04/2012 klokken 21:42
bruker Joe

På andre språk...

5 svar

stemmer

4

Ingen ajax nødvendig.

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

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

Svarte 12/04/2012 kl. 21:44
kilden bruker AlienWebguy

stemmer

0

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

Eksempel

Svarte 12/04/2012 kl. 21:45
kilden bruker The Alpha

stemmer

0

DEMO

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

Svarte 12/04/2012 kl. 21:47
kilden bruker coder

stemmer

0

Hvis noen trenger 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);

demo jsfiddle

Svarte 17/03/2014 kl. 06:54
kilden bruker Slawe

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

Du vil merke etterslep når binding til keyuphendelsen. Når du vanligvis binde seg til keydownarrangementet verdien av tekst-området har ennå ikke endret så du kan ikke oppdatere verdien av det andre tekstområdet til du bestemme tasten nede under keydownarrangementet. Heldig for oss at vi kan bruke String.fromCharCode()til å legge den nylig presset nøkkelen til andre tekstområdet. Dette er gjort for å gjøre den andre tekstområdet oppdatering raskt uten lag:

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

Her er en demo: http://jsfiddle.net/agz9Y/2/

Dette vil gjøre den andre tekst-området har samme innhold som den første, hvis du ønsker å legge til hva som er i det første til det andre du kan bare legge til verdien av det første til det andre i stedet for å overskrive:

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

Her er en demo: http://jsfiddle.net/agz9Y/3/

Oppdater

Du kan endre dette litt slik at .twoelementet husker sin egen verdi:

$('.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();
});