Счетчик количества символов на jQuery

4 мин. на чтение

jQuery популярная и достаточно мощная библиотека незаменимая для front-end web разработчиков, т.к. не требует каких-то глубоких познаний для решения повседневных задач. И хотя автор этой статьи предпочитай чистый (ванильный ECMAScript).

Касательно ванили существует интересная шутка, которой вы можете разыграть коллегу, если тот недавно начал писать на JavaScript, хотя автор встречал и опытных разработчиков, которые попадались на эту уловку. Чистый js код без каких-либо фрейморков называют Vanilla-js, т.к. в сети существует целый сайт посвященный этому «фрейворку» http://vanilla-js.com/. Естественно, это чистый javascript, т.к. для использования нужно подключить файл размером … 0 Кб.. Авторы сайта не поленились произвести performance тесты, которые показывают потрясающее превосходство «фреймворка» Vanilla-js над другими библиотеками, в частности jQuery, Dojo и пр.

Сегодня мы рассмотрим простой и очень понятный способ подсчета количества символов ввода в поле <input>. Как всегда в статье есть демо на codepen, тут мы рассмотрим сам код. Т.к. этот код с рабочего проекта в нем есть немного больше чем просто счетчик. По техническом заданию, счетчик идет в обратную сторону (от максимального количества до мин., например как в Twitter).

Самой трудной частью на удивление было выбор DOM event, по которому будет происходить вызов js кода, но обо всем по-порядку.

Для начала уточню, что вам понадобится какая-нибудь свежая версия jQuery и Bootstrap, если вы решите брать мой код 1 в 1, но по желанию от Bootstrap можно отказаться, если вас не интересует та часть с неактивной кнопкой отправить по условию счетчика, т.к. эта функция реализована с использованием css этого фреймворка.

var maxCount = 20;
var redCount = 3;
$("#count").text(maxCount);
function getCount() {
  var count = maxCount - $("#seo-title").val().length;
  $("#count").text(count);
  if (count <= redCount) { $(".inform-text").addClass("red"); } else if (count > 0 && $(".inform-text").hasClass("red")) {
    $(".inform-text").removeClass("red");
    $("#submit-button").removeClass("disabled");
  }
  if (count <= 0) { $("#submit-button").addClass("disabled"); $("#submit-button").text("Недоступно"); } else if (count > 0 &&  $("#submit-button").hasClass("disabled")) {
    $("#submit-button").removeClass("disabled");
    $("#submit-button").text("Отправить");
  }
}

maxCount задает максимальное значение доступных символов, из корого вычетается количество символов введенных в поле <input>. redCount определяет значение по которому цвет текста с количеством оставшихся символов изменится на красный. В остальной части код не вызовет у вас каких-то затруднений. Самая важная в рамках этой статьи строка эта:

$("#seo-title").val().length;

Именно применение этих двух методов возвращает количесто введенных символов.

Добавим немного css и собственно сам html:

form {
  width: 400px;
}
.red {
  color: red;
}

Ну и конечно немного html

Подсчет количества символов

Количество оставшихся символов:

Для наглядной демонстрации, милости прошу в codepen.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.