Ограничение количества символов в textarea и input

Иногда существует необходимость ограничить количество текста, которое пользователь может ввести в textarea и input. И если для input можно воспользоваться свойством maxlength, то в случае с textarea придется использовать js:

Для начала создадим js-функцию:

function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } }

как можно заметить в функцию передается 3 параметра — limitField, limitCount, limitNum.
limitField — поле, где будем считать симолы
limitCount — поле, где будем показывать оставшиеся
limitNum— сколько максимально символов можно ввести

Ну и наконец в нужном месте вставляем форму:

<form name="form"> 
 <textarea name="message" onKeyDown="limitText(this,this.form.count,30);" 
 onKeyUp="limitText(this,this.form.count,30);"> 
 </textarea> 
 <br> 
 <input readonly type="text" name="count" size="3" value="30"> символов осталось. 
 </form>

UPD Нашел вариант в виде плагина jQuery (пдсмотрел у scriptiny.com):

1. Копипастим в наш js-файл функцию:

(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);

2. Выствляем ограничения:

var elem = $("#chars");
$("#text").limiter(100, elem);

Соответсвенно elem – это элемент в котором будет выводится счетчик оставшихся символов, а 100 – максимальное число символов.

Пример здесь.

Запись опубликована в рубрике jQuery, Старые посты. Добавьте в закладки постоянную ссылку.

12 комментариев: Ограничение количества символов в textarea и input

  1. Аноним говорит:

    пост тоже полезный)

  2. Аноним говорит:

    Все понятно и просто и работает.
    ну капча конечно слишком замудренная, со второго раза набрал.

  3. bulanovandrej говорит:

    а для файла js отдельную папку в корне нужно создавать?

  4. FreeBird говорит:

    function limitText(limitField, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); }
    else { dlina = limitNum — limitField.value.length; };
    document.getElementById(‘divx’).innerHTML = ‘Осталось ‘ + dlina + ‘.’;
    };
    function tema(ttext){
    var tdlina = 250 — ttext.value.length;
    document.getElementById(‘divy’).innerHTML = ‘Осталось ‘ + tdlina + ‘.’;
    }

    Teма. Осталось 250.

    Сообщение. Осталось 1000.

  5. FreeBird говорит:

    function symb(scount) {
    var stringCount = scount + »;
    var lastSymbol = stringCount.charAt(stringCount.length-1);
    if(stringCount.length > 1)
    switch(stringCount.charAt(stringCount.length-2)+stringCount.charAt(stringCount.length-1)) {
    case ’11’: case ’12’: case ’13’: case ’14’: return ‘ символов’; break;
    };
    switch(lastSymbol)
    {
    case ‘1’:
    return ‘ символ’; break;
    case ‘2’:
    case ‘3’:
    case ‘4’:
    return ‘ символа’; break;
    case ‘5’: case ‘6’: case ‘7’: case ‘8’: case ‘9’: case ‘0’: return ‘ символов’; break;
    };
    };
    function limitText(limitField, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); }
    else { dlina = limitNum — limitField.value.length; };
    document.getElementById(‘divx’).innerHTML = ‘Осталось ‘ + dlina + symb(dlina) + ‘.’;
    };
    function tema(ttext){
    var tdlina = 250 — ttext.value.length;
    document.getElementById(‘divy’).innerHTML = ‘Осталось ‘ + tdlina + symb(tdlina) + ‘.’;
    }

  6. а как сделать тоже самое ,только с дополнительным полем — other1
    ну или как сократить количество символов в дополнительном поле — $OTHER1$

  7. Димосик говорит:

    ПоЛуЧиЛоСь …УРААААААААААААААААААА !!!!!!!!
    СПАСИБО ЕЩЁ РАЗ !!!! незнал как в автоматическом сделать,раньше сам сокращал,теперь хость так вот…круто..спасибо огромное!!!!

    • dima говорит:

      Посмотрите хелп по условным кодам uCoz, там еще много чего полезного можно сделать

  8. nevai говорит:

    Вот на phpguru 3 реализации нормальных есть просмотрите пример http://phpguru.com.ua/posts.php?id=39

    • Димыч говорит:

      nevai, спасибо за ссылку!
      Мой скрипт комментариев, после серверных обновлений на хосте, СДОХ.
      Нашел простенький и решил модифицировать его по-своему.
      Второй способ “Ограничение количества символов”, мне показался идеальным.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *