Észre fogja venni, lag, amikor kötelező a keyup
rendezvény. Ha általában kötődnek a keydown
rendezvény értékét a szöveges területen még nem változott, így nem frissíti az értéket a második szöveges területen, amíg megtalálja a gomb megnyomása közben keydown
eseményt. Szerencsére tudjuk használni String.fromCharCode()
, hogy csatolja az újonnan billentyű lenyomva a második szöveges területen. Ezt mind, hogy a második szöveges terület frissítés nélkül is gyorsan lag:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $(this).val() + key );
});
Itt van egy demo: http://jsfiddle.net/agz9Y/2/
Ez lehetővé teszi majd a második szöveg-terület tartalma ugyanaz, mint az első, ha azt szeretnénk hozzáfűzni, mi van az első és a második is hozzá tudod adni az érték az első és a második helyett felülírás:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $('.two').val() + $(this).val() + key );
});
Itt van egy demo: http://jsfiddle.net/agz9Y/3/
frissítés
Meg lehet változtatni, ez egy kicsit, így a .two
elemet emlékszik saját értéke:
$('.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();
});