Jednocześnie wpisywania tekstu z jednego textarea do innego textarea

głosy
23

Powiedzmy, że mam dwa pola tekstowe ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Chcę, aby móc dodać tekst z tego co wpisane w textarea jednego po tekście w textarea dwa. Na przykład: Jeśli piszę „Nazywam się Joe”. w textarea jednego będzie to jednocześnie powielać i napisać „Nazywam się Joe”. w textarea dwa po istniejących „Cześć”. tekst.

Wynik byłby ...

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

Mogę to zrobić z jQuery, czy trzeba to zrobić z AJAX? Jak bym go o to robi?

Utwórz 12/04/2012 o 22:42
użytkownik
W innych językach...                            


5 odpowiedzi

głosy
4

Nie wymaga ajax.

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

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

Odpowiedział 12/04/2012 o 22:44
źródło użytkownik

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

Przykład

Odpowiedział 12/04/2012 o 22:45
źródło użytkownik

głosy
0

PRÓBNY

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
Odpowiedział 12/04/2012 o 22:47
źródło użytkownik

głosy
3

Można zauważyć opóźnienie podczas wiązania do keyupimprezy. Kiedy zwykle wiążą się z keydownprzypadku wartość strefy tekstu jeszcze nie zmienił, więc nie można zaktualizować wartość drugiego obszaru tekstowego do momentu ustalenia klawisz wciśnięty podczas keydownzdarzenia. Na szczęście dla nas, możemy użyć String.fromCharCode(), aby dołączyć nowo wciśnięty klawisz do drugiego obszaru tekstowego. To wszystko zrobić, aby drugą aktualizację text-kierunkowy szybko bez opóźnienia:

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

Oto demo: http://jsfiddle.net/agz9Y/2/

Spowoduje to, że drugi obszar tekstowy mają taką samą zawartość jako pierwszy, jeśli chcesz dołączyć, co w pierwszym do drugiego można po prostu dodać wartość pierwszego do drugiego zamiast nadpisywania:

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

Oto demo: http://jsfiddle.net/agz9Y/3/

Aktualizacja

Można zmienić ten kawałek więc .twoelementem pamięta swoją wartość:

$('.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();
});​
Odpowiedział 12/04/2012 o 22:49
źródło użytkownik

głosy
0

Jeśli ktoś potrzebować 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

Odpowiedział 17/03/2014 o 07:54
źródło użytkownik

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