Как сделать ограничение вода символов в input на JavaScript

Здравствуйте. Когда н сайте есть форма для отправки каких-то данных и она содержит больше одного поля, то часто в эти поля вводят совсем не то, что мы ожидаем от пользователя. Иногда в поле Имя могут написать целое предложение, которое выглядит, как спам. В таких случаях стоит ограничить ввод символов в input, чтобы хоть как-то дать понять пользователю, что этого делать не стоит. На JavaScript установить ограничение на ввод символов очень просто. Буквально одной строчкой кода. И для этого есть целых 3 функции, которые мы сейчас рассмотрим. Но для начала предлагаю посмотреть пример в действии.

Демо

1
2
3
4

let name = document.querySelector('#name');
name.oninput = function(){
  this.value = this.value.substr(0, 15);
}

Предположим, что наш input имеет ID — name. Внесем его в одноименную переменную и запустим событие oninput, которое будет срабатывать после изменения этого поля.

this.value — значение нашего инпута
this.value.substr(0, 15) — Функция, которая ограничит ввод на 15 символов.
Функция substr(start, length) принимает в себя 2 параметра. 1 — с какого индекса начинать отсчет и 2 — на какую длину.

И еще 2 функции, которые в нашем случае, с ограничением ввода символов, сделают абсолютно то же самое. Поэтому можно использовать любую из них.

this.value = this.value.substring(0, 15);

И

this.value = this.value.slice(0, 15);

Как видите, ограничить ввод символов в input совсем не сложно. Но это только на стороне клиента, то есть сработает только в браузере пользователя, если у него включен JS. Иногда еще идет автоматическая рассылка спама специальными скриптами в обход такой защиты. В этом случае нужно делать дополнительную проверку и ограничивать длину строки на стороне сервера. Об этом мы поговорим с вами в другой раз, но вы можете прочитать материал на мему того, как обрезать текст по количеству слов и символов в PHP.