Sie werden bemerken , wenn Verzögerung an das keyup
Bindungsereignis. Wenn Sie in der Regel an das binden keydown
Ereignis den Wert des Text-Bereich noch nicht geändert , so dass Sie nicht den Wert des zweiten Text-Bereich aktualisieren , bis Sie die Taste gedrückt während der Bestimmung keydown
Ereignis. Zum Glück für uns können wir nutzen String.fromCharCode()
die neu gedrückte Taste auf dem zweiten Text-Bereich anzuhängen. Dies alles wird den zweiten Text-Bereich Update schnell und ohne Verzögerung zu machen getan:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $(this).val() + key );
});
Hier ist eine Demo: http://jsfiddle.net/agz9Y/2/
Dies wird der zweite Text-Bereich machen den gleichen Inhalt wie die erste haben, wenn Sie angehängt werden soll, was mit dem zweiten in die erste ist können Sie nur den Wert der zu dem zweiten ersten hinzufügen anstatt zu überschreiben:
$('.one').on('keydown', function(event){
var key = String.fromCharCode(event.which);
if (!event.shiftKey) {
key = key.toLowerCase();
}
$('.two').val( $('.two').val() + $(this).val() + key );
});
Hier ist eine Demo: http://jsfiddle.net/agz9Y/3/
Aktualisieren
Sie können dies ein wenig ändern , so dass das .two
Element seinen eigenen Wert erinnert sich :
$('.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();
});