—»     —»   Изучаем jQuery: лимитируем максимальное количество знаков в поле ввода текста
  Раздел: Tips and Tricks   Комментариев: 3  

Изучаем jQuery: лимитируем максимальное количество знаков в поле ввода текста



Изучаем jQuery: лимитируем максимальное количество знаков в поле ввода текста

Вероятно, вы уже сталкивались с этой проблемой, так как здесь не работает параметр maxlength. В сегодняшней статье мы расскажем вам о том, как реализовать это в jQuery.

Суть заключается в том, что система будет пересчитывать символы в поле каждый раз, как вы вводите один знак. В то же время, будет просчитываться разница между максимальным допустимым значением и актуальным числом знаков в поле, за счет чего будет отображаться индикатор оставшегося возможного числа знаков. Вы можете ознакомиться с результатом на странице с примером.

Важность проверки форм

Здесь суть заключается в том, чтобы клиенту было гораздо удобнее пользоваться вашим веб-сайтом. Именно для этого и нужна проверка форм. Важно учитывать то, что посетители часто не обращают внимание на проверку, так что проверка в реальном времени на стороне сервера (формат, длина и так далее) очень важна. Говоря это, мы можем переходить к делу.

Настройка страницы

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

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script  type="text/javascript" src="jquery-1.4.1.js"></script>
    <script  type="text/javascript">
        $(document).ready(function() {
        // here we will write-up the function
        });
    </script>
</head>
<body>
    <form  id="input_form"  method="POST" action="?">
    <textarea  id="text"></textarea>
    <input type="submit"  value="submit">
</form>
<div  id="counter"></div>
</body>
</html>

Теперь нам нужно расписать функцию. Давайте начнем с определения переменной знака, которая будет определять максимальное число символов в поле. Итак, напишите это в элементе счетчика.

var characters= 100;
$("#counter").append("You have  <strong>"+ characters+"</strong> characters remaining");

Теперь каждый раз, когда будет происходить событие keyup (каждое нажатие клавиши), будет производиться проверка:

$("#text").keyup(function(){
    if($(this).val().length > characters){
        $(this).val($(this).val().substr(0, characters));
}

Такая проверка может казаться очень сложной, но далее мы увидим, что все очень просто.

С помощью $(this).val() мы извлекаем содержимое textarea (в момент нажатия клавиши), а length предоставляет нам данные о количестве символов. Если это количество больше, чем мы указали в переменной (в нашем случае это 100), то содержимое textarea будет таким же, как и textarea, которая проведена через функцию substr с параметром 0.

Функция substr вырезает часть строки; параметры, в которых определяется, где начинаются и заканчиваются символы, вырезаются. В нашем случае, начало на 0 (начало строки), а конец на 100 (100 символов).

В целом: если строка, содержащаяся в textarea больше значения, которое мы указали, то строка будет урезана до указанного значения максимального количества символов.

Теперь давайте заменим значение числом оставшихся возможных знаков:

var  remaining = characters - $(this).val().length;
$("#counter").html("You have <strong>"+ remaining+"</strong> characters remaining");

Здесь мы просто вычитаем число символов, вписанных в textarea, а полученное число впишем в элемент с информацией об оставшихся символах.

Давайте добавим небольшой трюк. Если число оставшихся символов менее 10, то индикатор будет отображен красным цветом:

if(remaining <= 10)
{
    $("#counter").css("color","red");
}
else
{
    $("#counter").css("color","black");
}

В итоге скрипт должен представлять нечто вроде этого:

$(document).ready(function()  {
    var characters = 220;
    $("#counter").append("You have <strong>"+  characters+"</strong> characters remaining");
    $("#text").keyup(function(){
        if($(this).val().length > characters){
        $(this).val($(this).val().substr(0, characters));
        }
    var remaining = characters -  $(this).val().length;
    $("#counter").html("You have <strong>"+  remaining+"</strong> characters remaining");
    if(remaining <= 10)
    {
        $("#counter").css("color","red");
    }
    else
    {
        $("#counter").css("color","black");
    }
    });
});

jQuery: логика расширений

Теперь у нас есть скрипт, который мы можем использовать не один раз, и очень даже логичным будет то, чтобы сделать из этого плагин.

Давайте начнем с настройки структуры плагина:

(function($){
    $.fn.limit = function(options) {

Наш метод называется limit и он может запускать различные параметры. Давайте начнем с установки значений по умолчанию

var  defaults = {
    limit: 200,
    id_result: false,
    alertClass: false
}

Как видите, параметры представляют собой максимальное значение символов, id элемента, которое заключает в себе данные об оставшихся символах (по умолчанию этого нет), и класс CSS, который определяет цвет (и/или другие параметры), которым отображается индикатор, если показатель ниже 10 символов.

Такой метод будет правильным. По крайней мере, лучше того, что мы видели до этого момента. По факту, никто не говорил, что текст обязательно должен становиться красным. Или кто сказал, что текст вообще должен всегда быть черным? В данном случае, мы не будем пользоваться методам CSS, а вместо этого применим addClass и removeClass, за счет чего мы сможем настраивать параметры прямо в css-файле.

Теперь, давайте расширим круг возможных опций:

var options =  $.extend(defaults, options);

Теперь давайте напишем функцию, следящую за высвечиванием данных только тогда, когда параметр id_result был изменен:

return this.each(function() {
    var characters = options.limit;
    if(options.id_result != false)
    {
        $("#"+options.id_result).append("You have <strong>"+  characters+"</strong> characters remaining");
    }
    $(this).keyup(function(){
        if($(this).val().length > characters){
        $(this).val($(this).val().substr(0, characters));
        }
        if(options.id_result != false)
        {
            var remaining =  characters - $(this).val().length;
            $("#"+options.id_result).html("You have <strong>"+  remaining+"</strong> characters remaining");
            if(restanti <= 10)
            {
                $("#"+options.id_result).addClass(options.alertClass);
            }
            else
            {
                $("#"+options.id_result).removeClass(options.alertClass);
            }
        }
    });
});

Вот итоговая версия плагина:

(function($){
    $.fn.limit  = function(options) {
        var defaults = {
        limit: 200,
        id_result: false,
        alertClass: false
        }
        var options = $.extend(defaults,  options);
        return this.each(function() {
            var characters = options.limit;
            if(options.id_result != false)
            {
                $("#"+options.id_result).append("You have <strong>"+  characters+"</strong> characters remaining");
            }
            $(this).keyup(function(){
                if($(this).val().length > characters){
                    $(this).val($(this).val().substr(0, characters));
                }
                if(options.id_result != false)
                {
                    var remaining =  characters - $(this).val().length;
                    $("#"+options.id_result).html("You have <strong>"+  remaining+"</strong> characters remaining");
                    if(remaining <= 10)
                    {
                        $("#"+options.id_result).addClass(options.alertClass);
                    }
                    else
                    {
                        $("#"+options.id_result).removeClass(options.alertClass);
                    }
                }
            });
        });
    };
})(jQuery);

Теперь, если мы хотим при помощи плагина добиться результата, который мы видели в первой части, нам придется включить плагин и немного подредактировать код (не забудьте создать класс css):

<script  type="text/javascript" src="jquery-1.4.1.js"></script>
<script  type="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
    color: red;
}
</style>
<script  type="text/javascript">
    $(document).ready(function() {
        $("#testo").limit({
            limit: 100,
            id_result: "counter",
            alertClass: "alert"
            });
         });
</script>

Скачать архив с файлами

* Версия 1.0, Файл издан: 16 мая 2010, Размер: 912 байт
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 12874   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 июня 2010 @ 23:44
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Спасибо за статью. Если можно по-больше таких с подробным описанием.
Комментарий #2: 4 марта 2011 @ 12:25
Написал: Bullet — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Еще не плохо бы на момент инициализации подсчитывать символы которые уже есть в поле:

var characters = options.limit;
var remaining = characters - $(this).val().length;
if(options.id_result != false)
{
if(remaining <= 10)
$("#"+options.id_result).addClass(options.alertClass);
$("#"+options.id_result).append("Осталось символов: <strong>"+ remaining +"</strong");
}
Комментарий #3: 4 марта 2011 @ 12:31
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
Bullet, +++ !
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930