I have implemented jQuery Autosize to automatically adjust the height of textarea elements.
It works perfectly when I focus on the textarea element. However, when I blur out of the textarea, I want to reset the height to its default value.
I am unsure of what action to take on blur in order to reset the textarea to its default height.
Below is a snippet of the JavaScript code I am testing on the console:
Initially, when the page loads, the textarea is in blur state:
$('#announcement').css('height'); // "36px"
When I focus on the textarea:
$('#announcement').css('height'); // "90px"
$('#announcement').removeAttr('height');
$('#announcement').css('height'); // "90px"
// Even after removing the 'height' attribute, why does the value remain the same?
Although I can easily solve this issue by setting the height on blur using:
$('#announcement').css('height', '36px');I would prefer a solution that does not involve setting CSS properties in JavaScript code.
Any suggestions?