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

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

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

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

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

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

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

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

[html]
<form>
<textarea rows="5" cols="100%" OnKeyUp="ResizeTextArea(this,2);"></textarea>
</form>
[/html]

[html]
<style>
.textarea {
width: 100%;
height: 5px;
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}
</style>
[/html]

[html]
<script>
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);
}
</script>
[/html]

HTML

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

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

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

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);
}

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

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