And a little more about auto-tuning textarea

Redesigning one “smartphone” project, I came across a chat page with a textarea that cannot resize depending on the number of lines. It was not a problem to find and connect a small plugin ( autoResize ) to jQuery, which can increase the height of the textarea, but with the form test, I vaguely missed something.

And this “something” was the impossibility of briefly concealing a textarea bloated under the domination of “multi-books”, moreover so that later it would open up without any extra questions. This is because we seem to have learned how to increase the height of the textarea, but for some reason we don’t want to hide it in order to make room on the screen.



The decision came on its own: tell autoResize when we change the focus from our textarea to another page element and vice versa when we return to it again. And get something done at the same time.
')
After 73 lines of the plug-in, it will be enough to insert the following code:

//       $(this).blur(function(){ $(this).height(origHeight + 'px'); }); //     $(this).focus(function(){ $(this).height(lastScrollTop + 'px'); }); 

Now, if you want to read the text of the interlocutor, without sending the unfinished answer, you can tap into the chat field and the textarea will be reduced to one line. And vice versa: by tapping back on your answer, you will force it to open up again to a comfortable height.

PS: Example on jsfiddle . From there, you can download a modified plugin.