Du vil merke etterslep når binding til keyup
hendelsen. Når du vanligvis binde seg til keydown
arrangementet 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 keydown
arrangementet. 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 .two
elementet 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();
});