Вы заметите задержки при привязке к keyup
событию. Когда вы обычно связываетесь с keydown
событием значения текстовой области до сих пор не изменились , так что вы не можете обновить значение второй текстовой области до тех пор , пока определений нажатой клавиши во время keydown
события. К счастью для нас , мы можем использовать String.fromCharCode()
для добавления нового нажатия клавиши на второй текст-области. Все это делается , чтобы сделать второе обновление текста области быстро без запаздывания:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $(this).val() + key );
});
Вот демо: http://jsfiddle.net/agz9Y/2/
Это сделает второй текст зона имеет один и тот же состав, что и первый, если вы хотите добавить что в первом ко второй, вы можете просто добавить значение первого ко второму, а не перезаписывать:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $('.two').val() + $(this).val() + key );
});
Вот демо: http://jsfiddle.net/agz9Y/3/
Обновить
Вы можете изменить это немного , так что .two
элемент запоминает свое значение:
$('.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();
});