Высота textarea по содержимому

Высота textarea по содержимому

Автоматическая высота textarea по содержимому

Сайты и его элементы становятся все более гибкими по отношению к пользователям, сам контента адаптивный по ширине экрана, меню превращается в кнопку с тремя-четырьмя полосками и т.д. Один из показателей гибкости – адаптация поля textarea к содержимому, о нем-то и пойдет речь далее.

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

Именно с этим и борется «резиновый textarea», так он называется благодаря тому, что растягивается в высоту в зависимости от количества введенных строк. Такое поле ввода для текста, кстати, имеет и социальная сеть ВКонтакте. Пользователи начинают привыкать к тому, что поле для ввода текста не требует от них никаких других действий, а разработчики делают все, чтобы повысить юзабилити сайта. Установите небольшой код, чтобы подружить пользователя со своим сайтом.

Простая установка

1. Добавьте следующий код в имеющийся на сайте JS-файл или внизу страницы, предварительно заключив код в <script> … </script>:

Код var idNum = 0, data = ‘elastic’;
$(‘body’).on(‘keyup’, ‘textarea’, function(){
if($(this).attr(‘data’)==»+data+»){$(this).attr({style:’overflow:hidden;’+$(this).attr(‘style’)+»,data:»+$(this).attr(‘data’)+»+idNum+»});idNum++;}
tData = $(this).attr(‘data’);
if($(‘div’).size()==0){
attr = ‘style=»display:none;padding:’+$(this).css(‘padding’)+’;width:’+$(this).css(‘width’)+’;min-height:’+$(this).css(‘height’)+’;font-size:’+$(this).css(‘font-size’)+’;line-height:’+$(this).css(‘line-height’)+’;font-family:’+$(this).css(‘font-family’)+’;white-space:’+$(this).css(‘white-space’)+’;word-wrap:’+$(this).css(‘word-wrap’)+’;letter-spacing:0.2px;» data=»‘+tData.replace(»+data+»,’clone’)+'»‘;
clone = ‘<div ‘+attr+’>’+$(this).val()+'</div>’;
$(‘body’).prepend(clone);
idNum++;
}else{
$(‘div’).html($(this).val());
$(this).css(‘height’,»+$(‘div’).css(‘height’)+»);
}
});

2. К полю textarea прикрепите атрибут data=»elastic». Пример кода поля:

Код <textarea cols=»50″ rows=»5″ name=»message» id=»message» data=»elastic»></textarea>

3. Если у поля textarea появляется полоса прокрутке, то скройте ее с помощью стиля overflow: hidden, вот так:

Код textarea {overflow: hidden}

Не забудьте подключить jQuery, если на вашем сайте он не подключен. На сайтах uCoz эта библиотека подключается автоматически.

Принцип работы скрипта незамысловатый

Скрипт копирует поле textarea и его содержимое, все это обновляется и проверяется при вводе. Таким образом, скрипт задает высоту такую же как и у клона. Он, кстати, является простым блочным элементом.

Код

Ключевым моментом данного решения является код CSS. Как уже упоминалось, невидимый клон должен иметь такие же типографические свойства, как и элемент textarea. В список включается не только font-size и font-family, но и свойства white-space и word-wrap, так как клон должен имитировать все, что происходит внутри элемента textarea.

Для элемента textarea код CSS будет следующим:

textarea { width: 500px; min-height: 50px; font-family: Arial, sans-serif; font-size: 13px; color: #444; padding: 5px; } .noscroll { overflow: hidden; }

Обратите внимание на отдельный класс со свойством overflow: hidden, который используется для предотвращения появления полоски прокрутки. Обычно, отключение полоски прокрутки у элемента textarea является плохой идеей, но мы изменяем его с помощью JavaScript. Данный класс будет добавляться кодом JavaScript, поэтому при отключенном JavaScipt элемент textarea будет функционировать нормально (с прокруткой).

Следующий код CSS используется для скрытого клонирующего элемента:

.hiddendiv { display: none; white-space: pre-wrap; width: 500px; min-height: 50px; font-family: Arial, sans-serif; font-size: 13px; padding: 5px; word-wrap: break-word; }

Мы используем свойство display: none, чтобы сделать элемент невидимым для пользователя. Скорее всего, такое решение подходит и для программ читалок с экрана.

Также используется свойство white-space со значением “pre-wrap”, для корректного переноса строк. Ширина элемента клона равна ширине элемента textarea. Кроме того одинаковыми задаются несколько других свойств, в том числе и min-height.

А теперь код JavaScript (используется jQuery):

$(function() { var txt = $(‘#comments’), hiddenDiv = $(document.createElement(‘div’)), content = null; txt.addClass(‘noscroll’); hiddenDiv.addClass(‘hiddendiv’); $(‘body’).append(hiddenDiv); txt.bind(‘keyup’, function() { content = txt.val(); content = content.replace(/\n/g, ‘<br>’); hiddenDiv.html(content); txt.css(‘height’, hiddenDiv.height()); }); });

Данный код предполагает, что у нас используется только один элемент textarea на странице. Если имеется несколько элементов textarea на странице, то нужно изменить селектор в первой строке для выбора нужных.

Высота динамически изменяется при обработке события jQuery keyup. Код легко изменить для работы с AJAX, если содержание меняется таким образом.

Использование события keyup также является хорошим примером, потому что данный элемент часто используется при ввода данных пользователем.

Ширина textarea 100% и внутренний padding — решение есть!

Проведем ряд опытов и выясним как себя ведет ширина textarea 100% и внутренний padding, без и c применением DOCTYPE

Проведем ряд опытов и выясним как себя ведет ширина textarea 100% и внутренний padding c применением DOCTYPE:

Как вы видите TEXTAREA вышел за родительский DIV, это особенность применения DOCTYPE. Теперь шустро прочти Вывод 1

К сожалению, добавлением 3-го внешнего DIV-а данная проблема тоже не решается:

Но проблему можно решить указав внешний margin 17px установленный казалось бы больше нормы:

Почему 17 читай в выводе 2

А теперь примеры с применением TABLE, для тех, кто думает что через TABLE должно отображать верно:

И опять проблема исчезает, если указать внешний margin:17px (казалось бы больше нормы):

И на последок, пример под названием — спрячем лишнее:

9876543210

Как видите, главным моментом здесь является overflow: hidden, который дочерним элементам не позволяет показывать все то, что является по ширине больше чем основной родительский! При этом, margin-right:15000px никак не влияет на горизонтальный скроллбар

Выводы использования DOCTYPE:

1. если внутреннему элементу (например TEXTAREA) указать 100%, то можете считать что ширину он позаимствует у своего родителя (например DIV) без учета pading, но с учетом margin. При этом, если внутреннему элементу (например TEXTAREA) указать такой же margin что и у родительского элемента (например DIV), то он сработает, но никак не повлияет на него (на DIV) и родительский элемент по ширине останется такойго же размера! Для интереса показываю следующий тест:

<div style=»border:2px dotted #009999; padding:5px; width:45%»>
<textarea style=»border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto; margin-right:1234px»>у данного элемента TEXTAREA margin-right:1234px, обратите внимание на родительский DIV — ширина осталась прежней, но появился горизонтальный скроллбар у окна браузера!</textarea>
</div>

2. число 17 находится по сумме отступов для DIV — справа, для TEXTAREA — слева! Считать будем так:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *