Ограничение количества символов в поле Textarea…
Ex.clusive | 01.09.2010Наверняка, каждый веб-разработчик рано или поздно сталкивается с необходимостью проверки правильности заполнения форм. Один из главных этапов этой проверки – это допустимая длина содержимого различных полей. И если возможности языка разметки HTML позволяют ограничить длину содержимого полей типа “input”, то ограничивать длину содержимого полей “textarea” является невозможным без использования дополнительных сценариев.
Приведу достаточно простой пример сценария, написанного на JavaScript, позволяющего контролировать ввод содержимого в такие поля, автоматически блокировать возможность заполнения при достижении определённой длины уже введённого содержимого и выводить в нужном месте счётчик количества символов. Функция достаточно универсальная, так как в качестве параметров в неё передается 3 значения: “id” поля, ввод в которое необходимо контролировать; “id” элемента, в котором требуется выводит счетчик символов и, собственно, значение максимальной длины содержимого проверяемого элемента (количество допустимых символов).
JavaScript – сценарий
Для начала, необходимо объявить и описать функцию, которая и будет выполнять все необходимые операции. Вставлять её можно в любое место между тегами <head></head> или <body></body>, либо вынести в отдельный подключаемый файл…
<script language=JavaScript type="text/javascript"> function length_check(len_max, field_id, counter_id) { var len_current = document.getElementById(field_id).value.length; var rest = len_max - len_current; if (len_current > len_max ) { document.getElementById(field_id).value = document.getElementById(field_id).value.substr (0, len_max); if (rest < 0) { rest = 0;} document.getElementById(counter_id).firstChild.data = rest + ' / ' + len_max; alert('Максимальная длина содержимого поля: ' + len_max + ' символа(-ов)'); } else { document.getElementById(counter_id).firstChild.data = rest + ' / ' + len_max; } } </script>
На всякий случай, кратко распишу содержание приведённого выше кода: объявляем новую функцию с тремя необходимыми нам параметрами: максимальная длина, id поля “textarea”, id элемента-счётчика; объявляем переменную len_current и присваиваем ей длину текущей строки в поле; объявляем переменную rest, отвечающую за количество оставшихся символов; если текущая длина строки превышает максимальную – укорачиваем строку, в переменную счётчика записываем 0, обновляем значение счетчика и выводим окно с информацией о том, что лимит символов исчерпан; если же длина текущей строки не превышает максимальную – просто обновляем значение счётчика.
HTML – форма
Теперь необходимо создать сам уhtml- форму, обязательно включив в неё элемент, в котором будет отображаться счётчик (в примере это – <span id=”counter”>256 / 256</span>). Далее, вставляем в тег <textarea …> события onclick (отвечающее за клик курсором по полю) и onkeyup (отвечающее за ввод символов в поле) . Назначаем на эти события вызов ранее написанной функции и передаём в неё в качестве параметров упомянутые выше значения.
<form name="name1" action="index.php" method="post"> Название: <input type="text" name="title" maxlength="128" value="" /> Описание: <textarea name="textarea" id="textarea" onclick="length_check(256, 'textarea', 'counter')" onkeyup="length_check(256, 'textarea', 'counter')" ></textarea> Осталось символов: <span id="counter">256 / 256</span> <input type="submit" value="Добавить" /> </form>
Напоследок стоит сказать, что никогда не стоит переоценивать возможность проверки правильности заполнения форм при помощи JavaScript-сценариев. Не надо забывать, что они выполняются на стороне клиента и конечный пользователь может искусственно влиять на них (или же их поддержка может быть просто отключена в настройках браузера). Поэтому важные поля всегда стоит еще раз проверить при помощи PHP или любых других серверных средств, обойти которые простой возможности не представляется…
Спасибо! Очень пригодилось Ваше решение! :)
Спасибо.
Всё работает хорошо :)
Перед этим находил 2 или 3 версии но толком не смог разобратся. Атут всё просто и понятно :)
+100500)
“Перед этим находил 2 или 3 версии но толком не смог разобраться” – была подобная ситуация, потому и решил не брать готовое, а разобраться с нуля и помочь другим. Тем более, что всё оказалось совсем просто _)
Вот это действительно замечательный рецепт. Можно ли как-то на стороне сервера тоже ограничить?
А то спамеры могут просто отключать скирп :-(
Спасибо, пригодилось!
И +1 к Kira
Можно! В базе установить тип поля вводимых данных как VARCHAR(255). 255 – максимальное кол-во символов
Эсли вы хотите получать качественные комментарии то ограничивать нужно в разумных пределах.
Данная функция у меня работает с ошибкой. Если вводить символы в середину текста (после того, как его размер достигнет максимального значения), то предупреждение выдается (alert), но текст все равно остается большего размера.
Как это можно улучшить?
Разобрался. Текст обрезается в конце, что в принципе нормально. Спасибо за функцию.
Спасибо, но было бы ещё круче, если бы после достижения предела, был ещё запрет на ввод символов в середине, чтобы конец не обрезался, а то пользовательне заметит и похерет своё сообщение в конце)
А не будет глюков, если тип данный для поля сделать VARCHAR(255) , в в тексте будут переводы строки ?
Можно число хранить в самом же textarea если не надо выводить блок с числом
А вместо id, использовать this
Спасибо за код, вот мой упрощенный вариант, модификация. Позволяет использовать на любом поле где вставлен код без гемора с id. Само поле(счетчик) кстати тоже можно создавать через js это удобнее если проект большой и надо постоянно юзать функцию.
function length_check(obj) {
var len_current = obj.value.length;
var rest = obj.maxLength – len_current;
if (len_current > obj.maxLength ) { obj.value = obj.value.substr (0, obj.maxLength);
if (rest < 0) { rest = 0;} alert('Максимальная длина содержимого поля: ' + obj.maxLength + ' символа(-ов)'); }
}