Ограничение количества символов в поле Textarea…

Ex.clusive | 01.09.2010

Ограничение количества символов в поле Textarea...

Наверняка, каждый веб-разработчик рано или поздно сталкивается с необходимостью проверки правильности заполнения форм. Один из главных этапов этой проверки – это допустимая длина содержимого различных полей. И если возможности языка разметки 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 или любых других серверных средств, обойти которые простой возможности не представляется…

А чтобы Вы не пропустили ничего интересного, рекомендую подписаться на обновления блога:
Подписаться на обновления блога через RSS | Подписаться на рассылку обновлений на e-mail