Současně psaní textu z jednoho textarea do jiného textarea

Question

Současně psaní textu z jednoho textarea do jiného textarea

hlasů

23

Řekněme, že mám dvě textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Chci, aby bylo možné přidat text z toho, co jsem napsal v jednom textarea za text v textarea dva. Například: Když píši „Jmenuji se Joe.“ v textarea jednom bude současně duplikovat a psát „Jmenuji se Joe.“ v textarea dvou po stávající „Hi There.“ text.

Výsledkem by bylo ...

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

Mohu to s jQuery nebo musím to s AJAX? Jak bych mohl jít asi dělá?

jquery ajax

Položena 12/04/2012 v 22:42
uživatelem Joe

V jiných jazycích...

5 odpovědí

hlasů

4

No ajax nutná.

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

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

Odpovězeno 12/04/2012 v 22:44
zdroj uživatelem AlienWebguy

hlasů

0

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

Příklad

Odpovězeno 12/04/2012 v 22:45
zdroj uživatelem The Alpha

hlasů

0

DEMO

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

Odpovězeno 12/04/2012 v 22:47
zdroj uživatelem coder

hlasů

0

Pokud se někdo potřebovat 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

Odpovězeno 17/03/2014 v 07:54
zdroj uživatelem Slawe

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

Můžete si všimnout, zpoždění při navázání na keyupakci. Když se za normálních okolností váže k keydownudálosti hodnotu text-prostoru ještě nezměnil, takže není možné aktualizovat hodnotu druhého textového oblasti, dokud nezjistíte, stisk tlačítka v průběhu keydownakce. Naštěstí pro nás, můžeme použít String.fromCharCode()připojit nově stisknuté klávesy do druhého textového oblasti. To všechno se děje rychle provádět druhou aktualizaci textu prostoru bez jakéhokoli zpoždění:

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

Zde je ukázka: http://jsfiddle.net/agz9Y/2/

To umožní, aby se druhý text-prostor mají stejný obsah jako první, pokud se chcete připojit, co je v první do druhé stačí přidat hodnotu z prvního do druhého, spíše než přepsání:

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

Zde je ukázka: http://jsfiddle.net/agz9Y/3/

Aktualizace

Můžete změnit to trochu, takže .twoprvek pamatuje svou vlastní hodnotu:

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