Usted se dará cuenta de retraso cuando se une al keyup
evento. Cuando normalmente asocie a la keydown
caso de que el valor del texto-área todavía no ha cambiado por lo que no puede actualizar el valor de la segunda zona de texto hasta que determine la tecla pulsada durante el keydown
evento. Por suerte para nosotros podemos utilizar String.fromCharCode()
para anexar la clave recién pegada al segundo texto-zona. Todo esto se hace para hacer la segunda actualización de texto de área rápidamente y sin ningún tipo de retraso:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $(this).val() + key );
});
He aquí una demostración: http://jsfiddle.net/agz9Y/2/
Esto hará que el segundo texto-zona tienen el mismo contenido que la primera, si desea anexar Contenido de la primera a la segunda basta con añadir el valor de la primera a la segunda en lugar de sobrescribir:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $('.two').val() + $(this).val() + key );
});
He aquí una demostración: http://jsfiddle.net/agz9Y/3/
Actualizar
Puede cambiar esto un poco por lo que el .two
elemento se acuerda de su propio valor:
$('.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();
});