Js Keyeingabe + Animate Problem

[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);
                
                        
                    }
                    
                }
}); 


[elmarcia]

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

 Spoiler

			$('.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

 Spoiler

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);                
});

[Cc_Cc_Cc]

Thank you its works !