Simultan a scrie un text de la Textarea la altul Textarea

voturi
23

Să presupunem că am doi textarea ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Vreau să fie în măsură să adăugați text din ceea ce am scris în textarea unul după textul din textarea două. De exemplu: Dacă aș scrie „Numele meu este Joe.“ în textarea o va duplica simultan și scrie „Numele meu este Joe.“ în textarea două după existente „Bună.“ text.

Rezultatul ar fi ...

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

Pot face acest lucru cu jQuery sau am nevoie pentru a face acest lucru cu AJAX? Cum aș merge despre a face acest lucru?

Întrebat 12/04/2012 la 22:42
de către utilizator
În alte limbi...                            


5 răspunsuri

voturi
4

Nu este necesar ajax.

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

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

Publicat 12/04/2012 la 22:44
sursa de către utilizator

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

Exemplu

Publicat 12/04/2012 la 22:45
sursa de către utilizator

voturi
0

DEMO

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
Publicat 12/04/2012 la 22:47
sursa de către utilizator

voturi
3

Vei observa lag atunci când se leagă la keyupeveniment. Când se leagă în mod normal , la keydownevenimentul valoarea textului din zona încă nu sa schimbat , astfel încât să nu se poate actualiza valoarea celui de al doilea text zona până când determinați tasta apăsată în timpul keydownevenimentului. Din fericire pentru noi putem folosi String.fromCharCode()pentru a adăuga tasta nou apăsată la al doilea text din zona. Acest lucru este făcut pentru a face a doua actualizare a textului din zona rapid , fără nici un decalaj:

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

Aici este un demo: http://jsfiddle.net/agz9Y/2/

Acest lucru va face al doilea text din zona au același conținut ca și primul, dacă doriți să adăugați ceea ce este în primul la al doilea puteți adăuga doar valoarea primei la a doua, mai degrabă decât suprascrierea:

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

Aici este un demo: http://jsfiddle.net/agz9Y/3/

Actualizați

Puteți schimba acest lucru un pic , astfel încât .twoelementul își amintește propria valoare:

$('.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();
});​
Publicat 12/04/2012 la 22:49
sursa de către utilizator

voturi
0

Dacă cineva nevoie de Vanilie 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);

jsfiddle demo

Publicat 17/03/2014 la 07:54
sursa de către utilizator

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