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

Опубликовано 2019-09-21 автором stariс

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

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

Вообще-то на этом сайте я её не создавал, так как на всех популярных 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;

}