Můžete si všimnout, zpoždění při navázání na keyup
akci. Když se za normálních okolností váže k keydown
události hodnotu text-prostoru ještě nezměnil, takže není možné aktualizovat hodnotu druhého textového oblasti, dokud nezjistíte, stisk tlačítka v průběhu keydown
akce. Naštěstí pro nás, můžeme použít String.fromCharCode()
připojit nově stisknuté klávesy do druhého textového oblasti. To všechno se děje rychle provádět druhou aktualizaci textu prostoru bez jakéhokoli zpoždění:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $(this).val() + key );
});
Zde je ukázka: http://jsfiddle.net/agz9Y/2/
To umožní, aby se druhý text-prostor mají stejný obsah jako první, pokud se chcete připojit, co je v první do druhé stačí přidat hodnotu z prvního do druhého, spíše než přepsání:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $('.two').val() + $(this).val() + key );
});
Zde je ukázka: http://jsfiddle.net/agz9Y/3/
Aktualizace
Můžete změnit to trochu, takže .two
prvek pamatuje svou vlastní hodnotu:
$('.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();
});