Ограничить макс. длину строки в поле INPUT. Пример на JavaScript

Author Автор: Роман Чернышов    Опубликовано: 3 февраля 2011

Порой возникает необходимость ввести ограничение в пользовательской форме. Например на сайте в разделе регистрации, запретить пользователю вводить ник длинней 20 символов. Разумеется следует осуществлять такую проверку методами посерьезнее нежели чем JavaScript (проверять данные при помощи PHP). Но в качестве дополнительной проверки, тем более без перезагрузки страницы такой вариант вполне приемлем.

Функция проверки будет выглядеть следующим образом:

<script type="text/javascript">
<!--
function limiter(fild, size) {
if (fild.value.length &gt; size) {
fild.value = fild.value.substring(0, size);}
}
//-->
</script>

В теле документа код формы и в частности поле, которое мы будем проверять, будут иметь такой вид:

<form name="form" id="form" method="post" action="test.php">
 
<input name="text"  id="text"  type="text" onKeyDown="limiter(this,'20');"
onKeyUp="limiter(this,'20');"/>

Естественно длину максимальной длины строки вы можете задавать произвольную. Но помните (как я уже писал выше), такой метод проверки легко обойти. Так, что не используйте его в качестве основного.

4 комментария to “Ограничить макс. длину строки в поле INPUT. Пример на JavaScript”

  • ninjin 08.07.2011 в 11:55 дп

    а чем аттрибут maxlength не угодил?

  • Роман Чернышов 08.07.2011 в 12:58 пп

    maxlength годится только для тега INPUT, а что делать если нужно ограничить длину вводимой строки в TEXTAREA ?

    И во вторых, такое решение на яваскрипт позволяет выводить пользователю сообщение о достижение предельного кол-ва набранных символов.

  • ninjin 13.07.2011 в 1:22 пп

    не вижу в примерах ни текстарии, ни предупреждения. только трёхколёсный велосипед.

  • Максим 25.12.2015 в 3:53 пп

    Чедко! Получилось все! Спасибо!

Оставить комментарий

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка