Функция считывает количество символов в textarea

· JavaScript, jQuery и Снипеты · 2 мин чтения

Небольшой снипет, который позволяет считывать количество символов в textarea. И это не только его особенность.

Можно так же установить максимальное количество введенных символов и запретить пользователю вводить больше чем позволено.

Демо

Краткое описание

Функция устанавливает значение maxlength для textarea, который обрезает дальнейшее написание символов, а так же отрезает саму строку (в случае, если пользователь удалил maxlength атрибут). Далее подсчитывается количество символов и выводится в #counter. Все очень просто.

HTML

Для начала нужно создать простой HTML каркас — для textarea и счетчика.

<textarea id="text-counter"></textarea>

<div id="counter"></div>

jQuery функция

Ниже функция jQuery, которая выполняет счет и ограничивает написание больше символов чем позволено.

$(function() {
    $(document).ready(function() {
        var $textarea = '#text-counter'; 
        var $counter = '#counter';
        
        $($textarea).on('blur, keyup', function() {
            var $max = 10; // Максимальное кол-во символов
            var $val = $(this).val();

            $(this).attr('maxlength', $max); // maxlength=""

            if( $val.length <= 0 ) {
                $($counter).html(0);
            } else {
                if( $max < parseInt( $val.length ) ) {
                    $this.val( $val.substring(0, $max) ); 
                }

                $($counter).html( $(this).val().length );
            }
        });
  });
});

На этом все. Если у вас есть вопросы — задавайте их в комментариях. Я буду рад на них ответить.