Как стать автором
Обновить

И еще немного об автоподстройке высоты textarea

Время на прочтение 1 мин
Количество просмотров 5.3K
Редизайня один «смартфонный» проект, я наткнулся на страницу чата с 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. Оттуда же можно скачать измененный плагин.
Теги:
Хабы:
-1
Комментарии 5
Комментарии Комментарии 5

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн