Θα παρατηρήσετε καθυστέρηση, όταν συνδέεται με την 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 );
});
Εδώ είναι ένα demo: 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 );
});
Εδώ είναι ένα demo: 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();
});