Aynı anda başka bir textarea bir textarea metin yazma

Question

Aynı anda başka bir textarea bir textarea metin yazma

oy

23

Diyelim ki iki textareas var diyelim ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Ben textarea iki metnin sonra textarea bir de yazdıklarınızı metin eklemek mümkün olmak istiyorum. Örneğin: Ne yazarsanız Adım Joe. textarea bir de aynı anda çoğaltmak ve yazacak Adım Joe. Varolan sonra textarea iki Selam millet. Metin.

Sonuç olurdu ...

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

Ben jQuery ile bunu ya ben AJAX ile bunu yapmak gerekiyor mu? Bunu hakkında nasıl gitmek?

jquery ajax

Oluştur 12/04/2012 saat 22:42
kullanıcı Joe

Diğer dillerde...

5 cevaplar

oy

4

Hiçbir ajax gerekli.

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

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

Cevap 12/04/2012 saat 22:44
kaynak kullanıcı AlienWebguy

oy

0

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

Örnek

Cevap 12/04/2012 saat 22:45
kaynak kullanıcı The Alpha

oy

0

DEMO

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

Cevap 12/04/2012 saat 22:47
kaynak kullanıcı coder

oy

0

Birisi Vanilya JS ihtiyaç EĞER

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

Cevap 17/03/2014 saat 07:54
kaynak kullanıcı Slawe

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

Bağlanma zaman lag göreceksiniz keyupolay. Normalde için bağlama sırasında keydownolay metin alanının değerini sen sırasında basılan tuşu belirler kadar ikinci metin-alanın değerini güncellemek olamaz bu yüzden henüz değişmedi keydownolay. Şansımıza kullanabileceğimiz String.fromCharCode()ikinci metin-alana yeni basılan tuşu eklemek için. Bu, tüm herhangi bir gecikme olmadan hızlı bir şekilde ikinci metin-alan güncelleme yapmak için yapılır:

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

İşte bir demo: http://jsfiddle.net/agz9Y/2/

Bu size sadece üzerine yazarak yerine ikinci ilk değerini ekleyebilirsinizcreatives kapatıldığı ikinci neler eklemek istiyorsanız ikinci metin alanlı, ilk olarak aynı içeriğe sahip yapacaktır:

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

İşte bir demo: http://jsfiddle.net/agz9Y/3/

Güncelleştirme

Böylece bu biraz değiştirebilir .twoeleman kendi değerini hatırlar:

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