Gleichzeitig schreibt Text von einem Textbereich in einem anderen Textarea

Question

Gleichzeitig schreibt Text von einem Textbereich in einem anderen Textarea

stimmen

23

Lassen Sie uns sagen, ich habe zwei Textbereiche ...

TextArea- 1

<textarea class=one></textarea>

TextArea- 2

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

Ich mag Text hinzufügen können von dem, was ich in einem Textfeld nach dem Text in Textbereich zwei getippt. Zum Beispiel: Wenn ich schreibe „Mein Name ist Joe.“ in einem Textfeld wird es gleichzeitig kopieren und schreiben: „Mein Name ist Joe.“ in TextArea- zwei nach dem bestehenden „Hallo dort.“ Text.

Das Ergebnis wäre ...

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

Kann ich das mit jQuery oder muss ich mit AJAX dies tun müssen? Wie würde ich mich über das tun dies?

jquery ajax

Veröffentlicht am 12/04/2012 um 22:42
vom benutzer Joe

In anderen Sprachen...

5 antworten

stimmen

4

Keine Ajax erforderlich.

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

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

Beantwortet am 12/04/2012 um 22:44
quelle vom benutzer AlienWebguy

stimmen

0

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

Beispiel

Beantwortet am 12/04/2012 um 22:45
quelle vom benutzer The Alpha

stimmen

0

DEMO

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

Beantwortet am 12/04/2012 um 22:47
quelle vom benutzer coder

stimmen

0

Wenn jemand braucht Vanille 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

Beantwortet am 17/03/2014 um 07:54
quelle vom benutzer Slawe

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

Sie werden bemerken , wenn Verzögerung an das keyupBindungsereignis. Wenn Sie in der Regel an das binden keydownEreignis den Wert des Text-Bereich noch nicht geändert , so dass Sie nicht den Wert des zweiten Text-Bereich aktualisieren , bis Sie die Taste gedrückt während der Bestimmung keydownEreignis. Zum Glück für uns können wir nutzen String.fromCharCode()die neu gedrückte Taste auf dem zweiten Text-Bereich anzuhängen. Dies alles wird den zweiten Text-Bereich Update schnell und ohne Verzögerung zu machen getan:

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

Hier ist eine Demo: http://jsfiddle.net/agz9Y/2/

Dies wird der zweite Text-Bereich machen den gleichen Inhalt wie die erste haben, wenn Sie angehängt werden soll, was mit dem zweiten in die erste ist können Sie nur den Wert der zu dem zweiten ersten hinzufügen anstatt zu überschreiben:

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

Hier ist eine Demo: http://jsfiddle.net/agz9Y/3/

Aktualisieren

Sie können dies ein wenig ändern , so dass das .twoElement seinen eigenen Wert erinnert sich :

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