Подсчет набранных символов для Fapos.

Встала у меня тут задача подсчитывать количество символов которое я пишу в статье.

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

Ну вот с этой целью я и отправился на поиски в по серверам. Конечно же в интернете. Где еще можно получить доступную и неплохую информацию...
Первые же скрипты которые были найдены то не работали, то как то криво работали.

Думалось что стоит только зайти и вот тебе куча скриптов будет на блюдечке, ан нет, пришлось конкретно немного покопать и помучить некоторых людей

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

Вот этот скрипт подсчитывающий количество набранных символов:
<script type="text/javascript">
$(function() {
    $("textarea[id='text-count']").keyup(function count(){
        var max = 10000;
        var number = $("textarea[id='text-count']").val().length;
        var ost = max - number;
        if(ost > 0){
            $("#count").html("Введенных символов: "+number);
            $("#counto").html("Осталось " + ost + " символов.");
            $(this).removeClass('type');
        }else{
            if(ost == 0){
                $("#count").html("Введенных символов: "+number);
                $("#counto").html("Вы достигли предела.");
                $(this).addClass('type');
            }else{
                $("#count").html("Введенных символов: "+number);
                $("#counto").html("Вы достигли предела. Лишних символов"+ost);
                $(this).addClass('type');            
            }
        }
    });
});
</script>
текстовое поле для которого считается количество символов:
<form>
<textarea  type="text" id="text-count"/></textarea>
</form>
Стили которые применяются:
<style type="text/css">
    .type{
        border: 1px solid red;
    }
</style>
то что выводит подсчет на экран:
<span id="count"></span>&nbsp;<span id="counto"></span>
и конечно же у вас должен быть подключен jQuery строкой типа этой:
<script type="text/javascript" src="jquery.js"></script>
в данном случае файл с jQuery лежит там же где и файл с формой и всем остальным.

Здесь производится подсчет символов которые набраны, производится вычисление оставшихся символов и еще некоторые проверки.

Для создания данной вещи очень помог урок "Динамический счет символов в полях формы при помощи jQuery."

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

Разбираем как работает.

Итак, для тех кому интересно разберем вкратце что тут и как работает... Ну точнее я сам пока что не очень знаю что и как работает в точности... но все же как понимаю...
Если не интересно то листайте вниз до момента подключения данного кода в CMS Fapos.

Про то что первая строка гласит об создании функции думаю говорить не надо... Да это было и в видео уроке

Далее идет строка открытия еще одной функции с определением того с чем будем работать
$("textarea[id='text-count']").keyup(function count(){
Здесь написано что будем работать с полем textarea у которого ID="text-count'
Следовательно все подсчеты символов, а ведь именно этим мы и занимаемся, будут по этому полю. Не будет такого поля и не будет никаких подсчетов.

Следующей строкой определяем количество символов которое поддерживается для введения.
var max = 10000;
Естественно что большее количество символов ввести будет можно, но при добавлении материала и отправки его на сервер это обрежется средствами CMS. 
Эта цифра пока что вписывается в ручную и взял я ее из следующего поля:
админка\каталог статей\настройки модуля\Максимальная длина статей:
В дальнейшем есть идея забирать это поле автоматом, но это в будущем:)

Далее строка подсчитывающая количество символов введенное в нужное нам поле:
var number = $("textarea[id='text-count']").val().length;
как вы видите все напечатанные символы загоняются в переменную "number", собственно ее и будем выводить в качестве Введенных символов.

Далее нам необходимо посчитать сколько символов у нас еще осталось
var ost = max - number;
для этого мы производим простое вычисление. Из переменной с максимальным количеством символов вычитаем переменную с количеством символов уже введенных.

А вот дальше производится проверка и вывод того что нам, ну или мне, нужно.
Вся проверка делится на 2 конструкции:
if(условие){
действие 1
}else{
действие 2
}
По Русски звучит это приблизительно так: если условие верно то выполняем определенное действие, иначе выполняем второе действие.

Вот тут то я и сделал проверку при разных условиях:
        if(ost > 0){
            $("#count").html("Введенных символов: "+number);
            $("#counto").html("Осталось " + ost + " символов.");
            $(this).removeClass('type');
        }else{
            if(ost == 0){
                $("#count").html("Введенных символов: "+number);
                $("#counto").html("Вы достигли предела.");
                $(this).addClass('type');
            }else{
                $("#count").html("Введенных символов: "+number);
                $("#counto").html("Вы достигли предела. Лишних символов"+ost);
                $(this).addClass('type');            
            }
т.е. первая проверка это когда оставшихся символов больше нуля, а вторая проверка когда оставшихся символов равно нулю.
При этом выводится разный текст. По сути это уже мои заморочи на красоту

можно было бы обойтись без всего этого выведя просто код
$("#count").html("Введенных символов: "+number);
$("#counto").html("Осталось " + ost + " символов.");
Этот код собственно и запихивает в спаны то что нам нужно, а именно количество символов которое напечатано и количество символов которое осталось.

Для тех кто уже подзабыл мы выводим текст вот через такие спаны:
<span id="count"></span>&nbsp;<span id="counto"></span>
Соответственно видно что у них разный ID по которым собственно и прописывается информация.

Вот этой строкой
$(this).removeClass('type');
и вот этой 
$(this).addClass('type');
мы либо добавляем либо убираем класс для оформления окна в котором набираем текст.
Стили приведены выше и повторять их тут нету смысла

Ну вот кажись и разобрались с тем как тут и что работает. Теперь необходимо все это каким то образом запихнуть в CMS Fapos и что бы там это тоже работало...

Подключаем код подсчета символов к CMS Fapos.

Для того что бы все это подключить нам надо будет поправить некоторые файлы как в шаблонах так и в самой CMS.

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

Для начала идем по пути template\шаблон\ и создаем папку с названием js
В нее необходимо положить файлик .htaccess который для пущей уверенности можно взять вот отсюда: \sys\js\
В эту вновь созданную папку кладем файлик jQuery, тогда строка его подключения будет выглядеть вот так:
<script type="text/javascript" src="/template/название шаблона/js/jquery.js"></script>
Эту строчку надо поставить между тегами 
<head>
</head>
Здесь же создаем файл с нашими скриптами. По идее их может быть оч много и что бы не плодить большого количества подключаемых файлов будем пихать все в одно место.

Создаем файл с названием script.js и в него суем вот этот код:
$(function() {
    $("textarea[id='text-count']").keyup(function count(){
        var max = 10000;
        var number = $("textarea[id='text-count']").val().length;
        var ost = max - number;
        if(ost > 0){
            $("#count").html("Введенных символов: "+number);
            $("#counto").html("Осталось " + ost + " символов.");
            $(this).removeClass('type');
        }else{
            if(ost == 0){
                $("#count").html("Введенных символов: "+number);
                $("#counto").html("Вы достигли предела.");
                $(this).addClass('type');
            }else{
                $("#count").html("Введенных символов: "+number);
                $("#counto").html("Вы достигли предела. Лишних символов"+ost);
                $(this).addClass('type');            
            }
        }
    });
});
Далее необходимо идти в свой шаблон. Так как у меня в основном используется только модуль статей то я буду делать на его примере.

Идем по следующему пути \template\название шаблона\html\stat и там ищем файлик addform.html и editform.html
В них собственно и будем подключать наш подсчет и наш вывод количества символов.
Следующие действия необходимо выполнить в обоих файлах, так как они похожи.

Ищем строчку 
<textarea class="text-area" name="mainText" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MAIN_TEXT}</textarea>
в ней перед >{MAIN_TEXT} ставим пробел и прописываем id="text-count". Собственно по этому ID скрипт и будет понимать из какого поля считать символы.
У вас должно будет получиться вот так:
<textarea class="text-area" name="mainText" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" id="text-count">{MAIN_TEXT}</textarea>
Далее необходимо поставить код 
<span id="count"></span> <span id="counto"></span>
в том месте где он вам нужен.
Лично у меня он стоит сразу же после текстового поля и выглядит это вот так:
 
    <tr>
        <td colspan="2">
            <textarea class="text-area" name="mainText" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" id="text-count">{MAIN_TEXT}</textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="right"><span id="count"></span> <span id="counto"></span></td>
    </tr>    
    <tr>
        <td>Краткое описание:</td>
        <td class="right"><textarea name="description">динамический подсчет введенных или набранных символов в текстовом поле с подключением к CMS Fapos</textarea></td>
    </tr>
кусок кода с кодом текстового поля и с кодом поля краткого описания.

В принципе вот и все, теперь можно заходить и проверять то что у нас получилось... 



Категория: 

Оставить комментарий