Полное руководство по заданию максимальной длины текстовых областей в HTML с помощью JavaScript

В веб-разработке часто необходимо контролировать максимальную длину текста, вводимого в текст области. Этот сценарий требует автоматического применения атрибута maxlength для нескольких текстовых областей. В то время как предыдущие решения включали ручную обработку событий для каждой текстовой области, мы рассмотрим альтернативный подход, который устраняет необходимость в повторяющемся коде.

Решение:

Ключ к этому решению заключается в возможностях JavaScript для сканирования страницы на предмет всех текстовых областей и динамического добавления прослушивателей событий в соответствующие. Используя событие onload, мы получаем доступ ко всему содержимому страницы при загрузке, включая любые текстовые области.

window.onload = function() {

Теперь мы можем перемещаться по документу, поиск всех элементов по тегу TEXTAREA:

var txts = document.getElementsByTagName('TEXTAREA');

Далее мы перебираем каждую текстовую область, чтобы проверить, имеет ли она действительный атрибут maxlength. Обратите внимание, что мы используем регулярное выражение, чтобы гарантировать, что значение maxlength является числом.

for(var i = 0, l = txts.length; i 
Для каждой подходящей текстовой области мы определяем функцию обратного вызова для проверки максимальной длины . Эта функция будет:
Получить значение атрибута maxlength в виде целого числа
Проверить, превышает ли текущая длина значения текстовой области максимальную длину
Если превышено , отобразить предупреждающее сообщение и усечь значение до максимально допустимой длины
var func = function() {
    var len = parseInt(this.getAttribute("maxlength"), 10);

    if(this.value.length > len) {
        alert('Maximum length exceeded: '   len);
        this.value = this.value.substr(0, len);
        return false;
    }
}
Наконец, мы присоединяем эту функцию обратного вызова к событиям нажатия клавиши и размытия текстовой области.
txts[i].onkeyup = func;
txts[i].onblur = func;
Этот комплексный подход обеспечивает бесшовное решение для автоматического установления максимальной длины для всех соответствующих текстовых областей на веб-странице без необходимости повторяющейся обработки событий.