Egyidejűleg írjon szöveget egy másik Textarea Textarea

Question

Egyidejűleg írjon szöveget egy másik Textarea Textarea

szavazat

23

Tegyük fel, hogy van két szövegdobozokba ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Azt akarom, hogy képes legyen felvenni a szöveget, amit beírtam textarea egymás után a szöveg textarea kettő. Például: Ha írok „A nevem Joe”. A textarea egy arra egyidejűleg két példányban, és írja: „A nevem Joe”. A textarea két miután a meglévő „Hi Van.” szöveg.

Az eredmény az lenne ...

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

Tehetek ez a jQuery, vagy nem kell tennem ezt az AJAX? Honnan megy körülbelül ezt?

jquery ajax

A kérdést 12/04/2012 22:42
felhasználó Joe

Más nyelveken...

5 válasz

szavazat

4

Nem ajax szükséges.

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

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

Válaszolt 12/04/2012 22:44
a forrás felhasználó AlienWebguy

szavazat

0

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

Példa

Válaszolt 12/04/2012 22:45
a forrás felhasználó The Alpha

szavazat

0

DEMÓ

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

Válaszolt 12/04/2012 22:47
a forrás felhasználó coder

szavazat

0

Ha valaki szüksége 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

Válaszolt 17/03/2014 07:54
a forrás felhasználó Slawe

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

Észre fogja venni, lag, amikor kötelező a keyuprendezvény. Ha általában kötődnek a keydownrendezvény értékét a szöveges területen még nem változott, így nem frissíti az értéket a második szöveges területen, amíg megtalálja a gomb megnyomása közben keydowneseményt. Szerencsére tudjuk használni String.fromCharCode(), hogy csatolja az újonnan billentyű lenyomva a második szöveges területen. Ezt mind, hogy a második szöveges terület frissítés nélkül is gyorsan lag:

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

Itt van egy demo: http://jsfiddle.net/agz9Y/2/

Ez lehetővé teszi majd a második szöveg-terület tartalma ugyanaz, mint az első, ha azt szeretnénk hozzáfűzni, mi van az első és a második is hozzá tudod adni az érték az első és a második helyett felülírás:

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

Itt van egy demo: http://jsfiddle.net/agz9Y/3/

frissítés

Meg lehet változtatni, ez egy kicsit, így a .twoelemet emlékszik saját értéke:

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