FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

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

Категории: Вебмастеру

Контроль поступающих от пользователя данных крайне важен при разработке веб-приложений. Проверка вводимых данных на соответствие формату важна как для самих пользователей (система может указать на случайную ошибку), так и для сервера (система может защитить от заливки в БД потенциально опасного кода). Потому любая форма, в которую пользователь вводит данные, должна проверяться.

Один из важных параметров, подлежащих контролю – длина вводимого текста. Я не так давно столкнулся с проблемой: maxlength не работает для поля ввода текста. Соответственно, чтобы проконтролировать максимальное количество знаков в поле ввода текста, будем применять удобное расширение jQuery.

Философия нашей проверки заключается в регулярном пересчете количества вводимых данных. Когда пользователь вводит очередной символ, программа должна пересчитывать количество знаков, введенных в поле. Адаптируя мою задачу под конкретные нужды, будет реализован счетчик, который будет показывать, сколько еще знаков можно ввести в данное поле.

Начнем с чистого листа. Создаем новую HTML-страницу с подключенной библиотекой jQuery и ставим на ней поле ввода. Кроме того, рядом с полем прицепим место для счетчика: div #counter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !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>

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

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

Также вешаем на событие «keyup» (нажатие пользователем клавиши клавиатуры) поля ввода функцию проверки:

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

Поясним данный код. Все предельно просто: $(this).val() вытягивает все данные, введенные в textarea на тот момент, когда пользователь нажал кнопку. Параметр length возвращает нам количество символов, введенных в текстовое поле. Делается проверка: если пользователь уже ввел максимальное количество символов, новый символ уже не вводится. Если же количество символов еще не достигло предела, даем пользователю ввести очередной знак. Таким образом я организовал автоматическую «обрезалку» строки, превышающей заданную длину. Такого рода «обрезалки» можно встретить на сайтах, предназначенных для отправки бесплатных СМС.

Последние штрихи – выводим количество оставшихся знаков. Алгоритм прост: вычитаем из максимальной длины существующую и отправляем данное значение в наш счетчик. Теперь каждый раз, когда пользователь нажимает клавишу в этом поле ввода, происходит обработка введенного в этом поле значения.

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

Немного стилизации: чтобы обратить на себя внимание, шрифт в счетчике символов будет краснеть, как только пользователь будет приближаться к «опасной зоне» и ему остается менее 10 символов. В результате имеем jQuery-скрипт

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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-плагин, который будет применяться в будущем.

Назовем метод limit. Структура плагина начинается со следующего кода:

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

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

1
2
3
4
5
var  defaults = {
    limit: 200,
    id_result: false,
    alertClass: false
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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);
            }
        }
    });
});

В итоге, я получил примерно такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
(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);

Чтобы применить данный плагин в нашем предыдущем примере, необходимо модифицировать нашу HTML-страницу следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

На этом примере видно, как легко в будущем будет сделать счетчик оставшихся символов, применяя заранее заготовленное расширение. Потому, напоследок можно дать совет программистам: старайтесь стандартизировать и унифицировать как можно больше кодерских задач, так как веб-дизайн – это, зачастую, решение типичных задач. А значит, нужно иметь хороший арсенал типичных инструментов для их решения.




Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail