Noterete ritardo quando il legame con la keyup
manifestazione. Quando normalmente legano al keydown
caso in cui il valore del testo-zona non è ancora cambiato, quindi non è possibile aggiornare il valore del secondo testo-zona fino a determinare il tasto premuto durante l' keydown
evento. Per fortuna noi possiamo usare String.fromCharCode()
per aggiungere la chiave appena premuto per il secondo testo-zona. Tutto questo è fatto per rendere il secondo aggiornamento del testo-spazio in modo rapido, senza alcun ritardo:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $(this).val() + key );
});
Ecco una demo: http://jsfiddle.net/agz9Y/2/
Questo renderà il secondo testo-zona hanno lo stesso contenuto come il primo, se si desidera aggiungere cosa c'è nel primo al secondo si può semplicemente aggiungere il valore del primo al secondo, piuttosto che sovrascrivere:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $('.two').val() + $(this).val() + key );
});
Ecco una demo: http://jsfiddle.net/agz9Y/3/
Aggiornare
È possibile modificare questo un po 'in modo che .two
l'elemento ricorda il proprio valore:
$('.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();
});