Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


textarea и maxlength (JavaScript)

Всем верстальщикам известно, что поле для ввода <textarea> не понимает атрибута maxlength — ограничения на максимальное количество вводимых символов.

Проблема решается при помощи Джаваскрипта.

textarea_maxlength()

Напишем простую джаваскрипт-функцию, которая заставит тег <textarea> воспринимать атрибут maxlength.

Назовем функцию void textarea_maxlength(). Пример работы функции: /files/191/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * Запускаем функцию после загрузки страницы,
 * можно через <body onLoad="textarea_maxlength()">
 *
 * После запуска все поля <textarea> станут понимать атрибут maxLength
 * Например: <textarea maxlength="1000"></textarea>, максимум 1000 символов
 * можно ввести
 *
 */

function textarea_maxlength()
{
    var i, maxLength, textArea;
    textArea = document.getElementsByTagName('textarea');
    
    for (i = 0; i < textArea.length; i++)
    {
        maxLength = parseInt(textArea[i].getAttribute('maxlength'));
        
        if (maxLength > 0)
        {
            textArea[i].onchange =
            textArea[i].onkeyup =
            textArea[i].onkeydown =
            textArea[i].onkeypress = function(maxlength)
            {
                return function()
                {
                    if (this.value.length > maxlength)
                    {
                        this.value = this.value.substring(0, maxlength);
                    }
                }
            }(maxLength);
        }
    }
}

Применение

После загрузки страницы запускаем функцию textarea_maxlength(), после чего все теги <textarea> начнут понимать атрибут maxlength.

Заключение

Решение грубое, но надежное. Конечно при вводе лишних символов функция просто обрезает лишнее с правого края и дело сделано, стандартное поле <input type="text" maxlength="50"> ведет себя по-другому, но усовершенствовать функцию до идеала дело техники.

Опубликовано: 08 сентября 2011  ·  Автор: Артём Фёдоров  ·  2856 просмотров

Категория

ГлавнаяПрограммированиеJavaScriptСобытияtextarea и maxlength (JavaScript)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

События, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания