Gelijktijdig tekst te schrijven van het ene Textarea naar de andere Textarea

stemmen
23

Laten we zeggen dat ik heb twee textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Ik wil in staat zijn om de tekst van wat ik typte in textarea de ene na de tekst in het tekstveld twee toe te voegen. Bijvoorbeeld: Als ik schrijf Mijn naam is Joe. in textarea zal men daar tegelijkertijd te dupliceren en schrijf Mijn naam is Joe. in textarea twee na de bestaande Hallo daar. tekst.

Het resultaat zou zijn ...

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

Kan ik doe dit met jQuery of moet ik dit doen met AJAX? Hoe zou ik dat doen?

De vraag is gesteld op 12/04/2012 om 22:42
user
In andere talen...                            


5 antwoorden

stemmen
4

Geen ajax nodig.

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

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

antwoordde op 12/04/2012 om 22:44
bron van user

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

Voorbeeld

antwoordde op 12/04/2012 om 22:45
bron van user

stemmen
0

DEMO

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
antwoordde op 12/04/2012 om 22:47
bron van user

stemmen
3

U zult vertraging merken wanneer binding aan het keyupevenement. Wanneer je normaal binden aan de keydownde waarde van de tekst-area gebeurtenis is nog niet veranderd, zodat je de waarde van de tweede tekst-gebied niet kunt bijwerken totdat u de toets tijdens het ingedrukt bepalen keydownevenement. Gelukkig voor ons kunnen we gebruik maken van String.fromCharCode()de nieuw ingedrukte toets naar de tweede tekst-area te voegen. Dit alles gebeurt op de tweede tekst-area-update snel te maken zonder enige vertraging:

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

Hier is een demo: http://jsfiddle.net/agz9Y/2/

Dit zal de tweede tekst-gebied hebben dezelfde inhoud als de eerste, als je wilt toevoegen wat er in de eerste naar de tweede kan je gewoon de waarde van de eerste toe te voegen aan de tweede plaats van overschrijven:

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

Hier is een demo: http://jsfiddle.net/agz9Y/3/

Bijwerken

Je kunt dit een beetje veranderen, zodat het .twoelement herinnert zich zijn eigen waarde:

$('.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();
});​
antwoordde op 12/04/2012 om 22:49
bron van user

stemmen
0

Als iemand nodig 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

antwoordde op 17/03/2014 om 07:54
bron van user

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