Сен 25

Шаманим с TEXTAREA

Речь в этой заметкек пойдет о стандартном элементе TEXTAREA и о свойствах, которые можно ему придать:

  1. Как отключить стандартную подсветку TEXTAREA и INPUT в браузерах на WebKit (например, Safari и Google Chrome).
  2. Как сделать собственную подсветку выделяемого поля TEXTAREA.
  3. Как отключить "растягиваемость" поля TEXTAREA (наиболее актуально для браузеров с движком WebKit).
  4. Как сделать так, чтобы поле TEXTAREA вытягивалось вниз автоматически под размер набираемого текста.

Решение этих задач очень простое:
1. Для отключения автоматического подсвечиваиня полей TEXTAREA и INPUT в браузерах Google Chrome, Safari нужно задать следующий стиль:

input, textarea { outline: none; }

2. Для создания собственного варианта подсветки поля TEXTAREA можно задать следующие стили:

textarea { outline:none; border:1px solid #000000; }
textarea:focus { border: 1px solid #ff0000; background: #ffffcc; }

Для полей INPUT решение аналогично.

3. Чтобы текстовое поле TEXTAREA не растягивалось до произвольных размеров (если пользователь растягивает его за нижний правый угол), нужно задать CSS-стиль:

textarea { resize: none; }

На этом проблема будет решена. Все поля TEXTAREA перестанут растягиваться.

4. Для того, чтобы поле TEXTAREA растягивалось вниз автоматически в процессе набора текста, можно воспользоваться jQuery-плагином "jQuery Autosize". Использование плагина очень простое. Теперь любое поле TEXTAREA на странице будет подстраивать свою высоту под размер помещенного в него текста.

$(document).ready(function(){
    $('textarea').autosize();  
});

Для правильной работы должны быть подключены скрипты jQuery и плагина jQuery Autosize.

Плагин распространяется свободно по MIT License.