Quote:
Originally Posted by Cc_Cc_Cc
Guten Tag,
ich habe eine Textarea und wenn man mehr als 5 Zeichen eingibt soll die Höhe um 100px steigen. Klappt auch , aber wenn ich jetzt mal sehr sehr schnell etwas eingebe macht er die höhe 2x oder 3x plus 100px. Also er führt dann den Animate Befehl 2-3x aus, dann ist meine Area Box nicht um 100px gestiegen sondern um 200-300px. Woran liegt das?
PHP Code:
$('.comment-area-text').on('keyup', function(e) {
var data = $(this).val();
if(data.length > 5) {
if($('.comment-area-text').height() === 19) {
$('.comment-area-text').animate({
"height":"+=100px"
}, 500);
}
}
});
|
That weird behaviour is because your animation is called multiple times before finishing.
You can solve this problem using .stop(clearQueue,goToEnd), use the params it works best for you
Code:
$('.comment-area-text').on('keyup', function(e) {
var data = $(this).val();
if(data.length > 5) {
if($('.comment-area-text').height() === 19) {
$('.comment-area-text').stop(true,true);
$('.comment-area-text').animate({
"height":"+=100px"
}, 500);
}
}
});
If you want a dynamic box, then u need to create a function that calculates the size of the box
Code:
const fontSize = 32;
const lineWidth = 10 //10 characters per line
$('.comment-area-text').on('keyup', function(e) {
var data = $(this).val();
let boxHeight = fontSize + (Math.floor(data.length/lineWidth))*fontSize;
$('.comment-area-text').stop(true,false);
$('.comment-area-text').animate({
"height":`${boxHeight}px`
}, 500);
});
