Растягивающийся блок

Здравствуйте уважаемые веб-мастера.

Уже несколько раз задавался вопрос: как у вас создана форма комментариев с растягивающимся полем?

Вообще-то на этом сайте я её не создавал, так как на всех популярных CMS и шаблонах к ним, этот прибамбас уже реализован.

Но раз есть вопрос, значит не лишним будет показать скрипт, создающий такое поле.

Он конечно же пригодится для создания отдельных html страничек, типа Гостевая книга, или Прдающая страница.

Да и вообще любая страница, где предполагаются отзывы посетителей, но нет формы этих отзывов.

Скрипт написан на чистом javascript, без использования сторонних библиотек, а значит его можно вставить в приведённом виде в нужное место страницы, без дополнительных подключений.

Итак создаём вот такую форму, потянув за уголок которой, можно растягивать и сжимать поле по горизонтали и вертикали.


HTML

<form>
  <textarea rows="2" cols="50" OnKeyUp="ResizeTextArea(this,2);"></textarea>
</form>

Зададим минимальные размеры и приукрасим.

textarea {
   width: 30em;
   height: 5em;
   border-radius: 3px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); 				
}

Javascript

function countLines(strtocount, cols) {
	var hard_lines = 1;
	var last = 0;
	while ( true ) {
		last = strtocount.indexOf("\n", last+1);
		hard_lines ++;
		if ( last == -1 ) break;
		}
	var soft_lines = Math.ceil(strtocount.length / (cols-1));
	var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
	if ( hard ) soft_lines = hard_lines;
	return soft_lines;
}

function ResizeTextArea(the_form,min_rows) {
	the_form.rows = Math.max(min_rows,countLines(the_form.value,the_form.cols) +1);
}

Вот и всё. Такой вот маленький, но очень полезный скрипт.

Желаю творческих успехов.


Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.

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

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