Здравствуйте уважаемые веб-мастера.
Уже несколько раз задавался вопрос: как создать форму комментариев с растягивающимся полем?
Вообще-то на этом сайте я её не создавал, так как на всех популярных 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);
}
Вот и всё. Такой вот маленький, но очень полезный скрипт.
Желаю творческих успехов.
В раздел >>>
А ну-ка, что там ещё интересного
Дополнительная панель для сайта
Увеличение картинки по клику
Счётчик обратного отсчёта
Слайдер на javascript
Пылающий заголовок
В раздел