Samtidig skriver tekst fra en Textarea til en annen Textarea

stemmer
23

La oss si at jeg har to textareas ...

textarea 1

<textarea class=one></textarea>

textarea 2

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

Jeg ønsker å være i stand til å legge til tekst fra det jeg skrev i textarea en etter teksten i textarea to. For eksempel: Hvis jeg skriver Mitt navn er Joe. i textarea vil det samtidig kopiere og skrive Mitt navn er Joe. i textarea to etter den eksisterende Hi There. tekst.

Resultatet ville være ...

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

Kan jeg gjøre dette med jQuery eller må jeg gjøre dette med AJAX? Hvordan skulle jeg gå om du gjør dette?

Publisert på 12/04/2012 klokken 21:42
bruker
På andre språk...                            


5 svar

stemmer
4

Ingen ajax nødvendig.

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

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

Svarte 12/04/2012 kl. 21:44
kilden bruker

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

Eksempel

Svarte 12/04/2012 kl. 21:45
kilden bruker

stemmer
0

DEMO

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
Svarte 12/04/2012 kl. 21:47
kilden bruker

stemmer
3

Du vil merke etterslep når binding til keyuphendelsen. Når du vanligvis binde seg til keydownarrangementet verdien av tekst-området har ennå ikke endret så du kan ikke oppdatere verdien av det andre tekstområdet til du bestemme tasten nede under keydownarrangementet. Heldig for oss at vi kan bruke String.fromCharCode()til å legge den nylig presset nøkkelen til andre tekstområdet. Dette er gjort for å gjøre den andre tekstområdet oppdatering raskt uten lag:

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

Her er en demo: http://jsfiddle.net/agz9Y/2/

Dette vil gjøre den andre tekst-området har samme innhold som den første, hvis du ønsker å legge til hva som er i det første til det andre du kan bare legge til verdien av det første til det andre i stedet for å overskrive:

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

Her er en demo: http://jsfiddle.net/agz9Y/3/

Oppdater

Du kan endre dette litt slik at .twoelementet husker sin egen verdi:

$('.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();
});​
Svarte 12/04/2012 kl. 21:49
kilden bruker

stemmer
0

Hvis noen trenger 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

Svarte 17/03/2014 kl. 06:54
kilden bruker

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