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

Smarty error: [in evaluated template line 15]: syntax error: unrecognized tag:     $("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');         
Smarty error: [in evaluated template line 15]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 15]: syntax error: unrecognized tag:             if(ost == 0){                 $("#count").html("Введенных символов: "+number);                 $("#counto").html("Вы достигли предела.");                 $(this).addClass('type');             
Smarty error: [in evaluated template line 15]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 15]: syntax error: unrecognized tag:                 $("#count").html("Введенных символов: "+number);                 $("#counto").html("Вы достигли предела. Лишних символов"+ost);                 $(this).addClass('type');                         
Smarty error: [in evaluated template line 15]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 19]: syntax error: unrecognized tag: border: 1px solid red;
Smarty error: [in evaluated template line 19]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 40]: syntax error: unrecognized tag:

Здесь написано что будем работать с полем textarea у которого ID="text-count'
Следовательно все подсчеты символов, а ведь именно этим мы и занимаемся, будут по этому полю. Не будет такого поля и не будет никаких подсчетов.

Следующей строкой определяем количество символов которое поддерживается для введения.

var max = 10000;

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

Далее строка подсчитывающая количество символов введенное в нужное нам поле:

var number = $("textarea[id='text-count']").val().length;

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

Далее нам необходимо посчитать сколько символов у нас еще осталось

var ost = max - number;

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

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

if(условие){ действие 1
Smarty error: [in evaluated template line 40]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 61]: syntax error: unrecognized tag: действие 2
Smarty error: [in evaluated template line 61]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 65]: syntax error: unrecognized tag:             $("#count").html("Введенных символов: "+number);             $("#counto").html("Осталось " + ost + " символов.");             $(this).removeClass('type');         
Smarty error: [in evaluated template line 65]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 65]: syntax error: unrecognized tag:             if(ost == 0){                 $("#count").html("Введенных символов: "+number);                 $("#counto").html("Вы достигли предела.");                 $(this).addClass('type');             
Smarty error: [in evaluated template line 65]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 65]: syntax error: unrecognized tag:                 $("#count").html("Введенных символов: "+number);                 $("#counto").html("Вы достигли предела. Лишних символов"+ost);                 $(this).addClass('type');                         
Smarty error: [in evaluated template line 65]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 102]: syntax error: unrecognized tag:     $("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');         
Smarty error: [in evaluated template line 102]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 102]: syntax error: unrecognized tag:             if(ost == 0){                 $("#count").html("Введенных символов: "+number);                 $("#counto").html("Вы достигли предела.");                 $(this).addClass('type');             
Smarty error: [in evaluated template line 102]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 102]: syntax error: unrecognized tag:                 $("#count").html("Введенных символов: "+number);                 $("#counto").html("Вы достигли предела. Лишних символов"+ost);                 $(this).addClass('type');                         
Smarty error: [in evaluated template line 102]: syntax error: unrecognized tag ''
Smarty error: [in evaluated template line 110]: syntax error: unrecognized tag 'MAIN_TEXT'
Smarty error: [in evaluated template line 111]: syntax error: unrecognized tag 'MAIN_TEXT'
Smarty error: [in evaluated template line 113]: syntax error: unrecognized tag 'MAIN_TEXT'
Smarty error: [in evaluated template line 119]: syntax error: unrecognized tag 'MAIN_TEXT'

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

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

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

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

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

Вот этот скрипт подсчитывающий количество набранных символов:

<script type="text/javascript"> $(function() elseelse         }     }); }); </script>

текстовое поле для которого считается количество символов:

<form> <textarea  type="text" id="text-count"/></textarea> </form>

Стили которые применяются:

<style type="text/css">     .type </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()else

По Русски звучит это приблизительно так: если условие верно то выполняем определенное действие, иначе выполняем второе действие.

Вот тут то я и сделал проверку при разных условиях:

        if(ost > 0)elseelse

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

можно было бы обойтись без всего этого выведя просто код

$("#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() elseelse         }     }); });

Далее необходимо идти в свой шаблон. Так как у меня в основном используется только модуль статей то я буду делать на его примере.

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

Ищем строчку 

<textarea class="text-area" name="mainText" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>

в ней перед > ставим пробел и прописываем id="text-count". Собственно по этому ID скрипт и будет понимать из какого поля считать символы.
У вас должно будет получиться вот так:

<textarea class="text-area" name="mainText" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" id="text-count"></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"></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>

кусок кода с кодом текстового поля и с кодом поля краткого описания.

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

Размещено: 10.10.2011

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

Ваше имя:

        


Введите цифры на картинке: