Ταυτόχρονα γράψετε το κείμενο από το ένα Textarea σε άλλο Textarea

Question

Ταυτόχρονα γράψετε το κείμενο από το ένα Textarea σε άλλο Textarea

ψήφοι

23

Ας πούμε ότι έχω δύο textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Θέλω να είναι σε θέση να προσθέσετε κείμενο από ό, τι θα πληκτρολογήσει στην περιοχή κειμένου το ένα μετά το κείμενο του textarea δύο. Για παράδειγμα: Αν γράψω «Το όνομά μου είναι Τζο». στην περιοχή κειμένου από το ταυτόχρονα θα επαναλάβει και να γράψει «Το όνομά μου είναι Τζο». στην περιοχή κειμένου δύο μετά το υπάρχον «Γεια σου». κείμενο.

Το αποτέλεσμα θα είναι ...

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

Μπορώ να το κάνετε αυτό με jQuery ή θα πρέπει να το κάνετε αυτό με AJAX; Πώς θα κάνετε για αυτό;

jquery ajax

Δημοσιεύθηκε 12/04/2012 στις 22:42
χρήστη Joe

Σε άλλες γλώσσες...

5 απαντήσεις

ψήφοι

4

Δεν απαιτείται ajax.

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

Επίδειξη: http://jsfiddle.net/agz9Y/

Απαντήθηκε 12/04/2012 στις 22:44
πηγή χρήστη AlienWebguy

ψήφοι

0

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

Παράδειγμα

Απαντήθηκε 12/04/2012 στις 22:45
πηγή χρήστη The Alpha

ψήφοι

0

ΔΙΑΔΗΛΩΣΗ

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

Απαντήθηκε 12/04/2012 στις 22:47
πηγή χρήστη coder

ψήφοι

0

Αν κάποιος χρειάζεται Βανίλια 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

Απαντήθηκε 17/03/2014 στις 07:54
πηγή χρήστη Slawe

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

Θα παρατηρήσετε καθυστέρηση, όταν συνδέεται με την keyupεκδήλωση. Όταν συνήθως συνδέονται με την keydownεκδήλωση της αξίας του κειμένου-περιοχή δεν έχει ακόμη αλλάξει έτσι δεν μπορείτε να ενημερώσετε την αξία του δεύτερου κειμένου περιοχή, μέχρι να καθοριστεί το πλήκτρο πατηθεί κατά τη διάρκεια της keydownεκδήλωσης. Ευτυχώς για εμάς που μπορούμε να χρησιμοποιήσουμε String.fromCharCode()για να προσθέσετε το νέο πατημένο το πλήκτρο με το δεύτερο κείμενο-περιοχή. Αυτό είναι όλα γίνονται για να κάνει τη δεύτερη ενημερωμένη έκδοση κειμένου περιοχή γρήγορα χωρίς καμία καθυστέρηση:

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

Εδώ είναι ένα demo: http://jsfiddle.net/agz9Y/2/

Αυτό θα κάνει το δεύτερο κείμενο-περιοχής έχουν το ίδιο περιεχόμενο με το πρώτο, αν θέλετε να προσθέσετε ό, τι στο πρώτο, στο δεύτερο, μπορείτε να προσθέσετε μόνο την αξία της πρώτης προς τη δεύτερη και όχι την αντικατάσταση:

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

Εδώ είναι ένα demo: http://jsfiddle.net/agz9Y/3/

Εκσυγχρονίζω

Μπορείτε να αλλάξετε αυτό το λίγο, ώστε το .twoστοιχείο θυμάται τη δική του αξία:

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