Редизайня один «смартфонный» проект, я наткнулся на страницу чата с textarea, не умеющей ресайзиться в зависимости от количества строк. Не составило проблемы найти и подключить небольшой плагин (autoResize) к jQuery, умеющий увеличивать высоту textarea, но при тесте формы мне смутно чего-то не хватало.

И этим «чем-то» была невозможность кратковременно скрыть раздувшуюся под засильем «многобуков» textarea, да еще так, чтобы потом она без лишних вопросов раскрылась обратно. Все потому, что увеличивать высоту textarea мы вроде бы научились, а вот ненадолго скрыть ее, чтобы освободить место на экране — почему-то не хотим.



Решение напросилось само: сообщить autoResize, когда мы меняем фокус с нашей textarea на другой элемент страницы и наоборот — когда возвращаемся к ней снова. И заставить при этом что-нибудь сделать.

Для этого будет достаточно после 73 строки плагина вставить следующий код:

// при онблуре сжимаемся до одной строки
$(this).blur(function(){
  $(this).height(origHeight + 'px');  
});
// при онфокусе восстанавливаем высоту
$(this).focus(function(){
  $(this).height(lastScrollTop + 'px');    
});

Теперь, если вам захочется прочитать текст собеседника, не отправляя незаконченный ответ, вы можете тапнуть в поле чата и textarea сократится до одной строки. И наоборот: тапнув обратно на свой ответ, вы заставите ее снова раскрыться до комфортной высоты.

P.S.: Пример на jsfiddle. Оттуда же можно скачать измененный плагин.