Подсчет количества символов с помощью JS также, как в Twitter

Для одно своего web-сайта, где люди пишут статьи и им приходится платить реальными деньгами, ведется подсчет символов каждой статьи. Подсчет символов в такой статье конечно же ведется на сервере, средствами PHP, но для удобства авторов я сделал подсчет в реальном времени с помощью JS. Это очень удобно и каждый автор, при отправки мне своей статьи видит сколько в ней символов и сколько он за нее получит в итоге денег.

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

Работа скрипта подсчета символов в статье

Проще, когда ты наглядно увидишь как работает то, о чем я пишу. Это как в той поговорке: “Лучше 1 раз увидеть, чем…” Ну, короче, в курсе…


Стоимость написания текста составит: 0 руб.

Скрипт

Скрипт представляет из себя 2 части:

  1. js-код;
  2. html-код.

js-код

Размещаем его по возможности в отдельном файле, но можно и непосредственно в html-коде:

<script>
  var price = 30;
  function countChar() {
    var is_probel = document.getElementById("is_probel"); 
    var count_char = document.getElementById("count_char");
    var count_char_textarea = document.getElementById("count_char_textarea");
    var price_out = document.getElementById("price_out");
    if (is_probel.checked == false) {
        count_char.value = count_char_textarea.value.replace(/ *\n*\r*\t*/g, "").length;
    }
    else { 
        count_char.value = count_char_textarea.value.length;
    }
    price_out.innerHTML = (parseInt(count_char.value) / 1000) * price;
  }
</script>

Где первая строчка (переменная price) – это цена за 1000 символов. Можно удобно и просто менять.

html-код

Вот непосредственно волшебная форма, которая считает у нас напечатанные “в нее” символы.


<div id="count_char_block">
  <textarea id="count_char_textarea" onchange="countChar()" onkeyup="countChar()" ></textarea><br/>
  <input type="text" id="count_char" value="0" readonly="readonly" />
  <input type="checkbox" id="is_probel" onchange="countChar()" />
  <label for="is_probel">Учитывать пробелы</label>
  <div>Стоимость написания текста составит: <span  id="price_out">0</span> руб.</div>
</div>

Вроде все просто!

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

Комментарии:

  1. Станислав опубликовал комментарий 18 Апрель 2013, 22:31 #

    Премного благодарен!
    Был бы признателен за доработку двух моментов:
    1. Для получающих прекрасный урок можно дополнить скрипт размещения формы по центру страницы на сайте.
    2. Активировать поле со стоимостью за 1000 знаков, чтобы можно было оперативно менять прямо на странице сайта. (если подскажете как вставить дополнения для частного случая, низко поклонюсь!)
    С уважением!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: