En même temps écrire un texte d'un Textarea à un autre Textarea

voix
23

Disons que j'ai deux textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Je veux être en mesure d'ajouter du texte à partir de ce que je tapé dans textarea un après le texte textarea deux. Par exemple: Si je vous écris « Mon nom est Joe. » dans textarea un il en même temps dupliquer et écrire « Mon nom est Joe. » dans textarea deux après l'actuel « Salut là. » texte.

Le résultat serait ...

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

Puis-je faire avec jQuery ou dois-je faire avec AJAX? Comment dois-je prendre?

Créé 12/04/2012 à 22:42
utilisateur
Dans d'autres langues...                            


5 réponses

voix
4

Non requis ajax.

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

Démo: http://jsfiddle.net/agz9Y/

Créé 12/04/2012 à 22:44
source utilisateur

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

Exemple

Créé 12/04/2012 à 22:45
source utilisateur

voix
0

DEMO

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
Créé 12/04/2012 à 22:47
source utilisateur

voix
3

Vous remarquerez lag lors de la liaison à l' keyupévénement. Lorsque vous liez normalement à l' keydownévénement la valeur du texte de la zone n'a pas encore changé de sorte que vous ne pouvez pas mettre à jour la valeur du deuxième texte de la zone jusqu'à ce que vous déterminez la touche enfoncée pendant l' keydownévénement. Heureusement pour nous , nous pouvons utiliser String.fromCharCode()pour ajouter la clé nouvellement pressée au deuxième texte région. Tout cela est fait pour que la deuxième mise à jour de la zone de texte rapidement sans aucun lag:

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

Voici une démo: http://jsfiddle.net/agz9Y/2/

Cela rendra la deuxième zone de texte ont le même contenu que le premier, si vous voulez ajouter ce qui est dans la première à la seconde, vous pouvez simplement ajouter la valeur de la première à la seconde plutôt que d'écraser:

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

Voici une démo: http://jsfiddle.net/agz9Y/3/

Mettre à jour

Vous pouvez changer cela un peu si l' .twoélément se souvient de sa propre valeur:

$('.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();
});​
Créé 12/04/2012 à 22:49
source utilisateur

voix
0

Si quelqu'un a besoin de 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);

démo jsFiddle

Créé 17/03/2014 à 07:54
source utilisateur

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