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.