JavaScript: подсчет символов в форме

Эта запись является продолжением темы отключения активных ссылок в коротких комментариях. На этом блоге комментарии с длиною менее 250 символов публикуются без активных ссылок. Правда было бы хорошо, если при наборе комментария можно было сразу видеть информацию о его длине, что бы не гадать есть уже в набранном комментарии 250 символов или нет. Для этого нужно немного подкорректировать файл comments.php  в установленном шаблоне.

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

1 . Добавляем javascript-код, который подсчитывает количество символов, где-то в начале файла comments.php в нужном шаблоне :

<script language="javascript">
function comment_lenght()
{
var text = document.getElementById('comment');
var content = text.value;
var contentwithoutspaces = content.replace(/\s+/g, '');
var length = contentwithoutspaces.length;
var commentlength = document.getElementById('commentlength');
commentlength.innerHTML = 'Вы ввели ' + length + ' символов, без учета пробелов.';
}
</script>

2. Вставляем в нужное Вам место вывод информации о том, сколько символов скрипт насчитал (я вставил сразу над формой для комментирования):

<p style="color: #23CBFF;" id="commentlength"></p></strong>

3. Находим кусок кода, который отвечает за форму комментирования, у меня это

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

и добавляем вызов javascript-функции при вводе текста в этой форме:

onkeyup="comment_lenght()"

в результате получается такая строка:

<p><textarea name="comment" onkeyup="comment_lenght()" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

Также обратите внимание на то, что в строке javascript-кода:

var text = document.getElementById('comment');

сообщается из какой формы брать информацию , я беру ее из формы комментирования, то есть из формы с id="comment":

<p><textarea name="comment" onkeyup="comment_lenght()" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

Вот и все. Результат можете увидеть у меня сразу над формой комментирования, ниже надписи "Комментарии короче 250 символов публикуются без активной ссылки. Пробелы не учитываются.". Как только начнете что-либо печатать - сразу же появится информация о количестве набранных символов.

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

<script language="javascript">
 function comment_lenght() {
 var text = document.getElementById('comment');
 var content = text.value;
 var contentwithoutspaces = content.replace(/\s+/g, '');
 var length = contentwithoutspaces.length;
 var commentlength = document.getElementById('commentlength');
 commentlength.innerHTML = 'Вы ввели ' + length + ' символов, без учета пробелов.';
 if (length < 100) {
  commentform.submit.disabled = true;
 }
 else {
  commentform.submit.disabled = false;
 }
}
</script>

Где:

  • commentform - id формы комментирования
  • submit - id кнопки отправить

Если будет введено 0 символов, то кнопка будет активна, но тут уже сам wordpress скажет что вы ничего не ввели,

Если будет введено от 1 до 99 символов, то кнопка будет не активна

Понравилось? =) Поделись с друзьями:

Обсуждение записи “JavaScript: подсчет символов в форме”

  1. Дмитрий Геннадьевич (www.supportblog.ru) says:

    Добрый день . Давно ищу подобный скрипт , ну приблизительно подобный . Может подскажете где можно найти скрипт для блогспотовской платформы , что бы работала следующая функция : пока не наберется определенное количество символов в комменте , комментарий не возможно было бы вообще опубликовать . Очень достали короткие комменты и хоть в правилах комментирования у меня в блоге написано ( 300 символов ) , все равно пишут 50 — 200 , а когда коммент не пропускаешь — обижаются . Может знаете где сия фишка найдется ?

  2. Владимир Демянович (elims.org.ua) says:

    Дмитрий Геннадьевич, не встречал таких скриптов. Но не думаю что это сложно самому доделать, в скрипт нужно всего-то добавить условие «если количество символов менее 300, то не отображать такой-то элемент страницы».

  3. Дмитрий Геннадьевич (www.supportblog.ru) says:

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

  4. Иван (zdorovko.info) says:

    Здравствуйте скрипт мне помог. Но чтобы он помог и другим добаьвте в конце него :-)
    А то я думаю не все догадаются))

    И второе. В комментах видел, что у вас та же проблема, что и у меня: Яндекс дает ничтожный процент трафика.
    У меня было время когда все было наоборот: в гугле я еще был в печнице, а в Яндексе в топе по многим запросам. Потом я поставил адсенс и поменял шаблон, хотя может и не из-за этого, но больше ничего не делал. Один ап и я не просто не в топе, а как будто песимизирован, хотя все страницы в индексе Яндекса. Это было еще в апреле (прошло более 3 месяцев). Сейчас заходит по несколько человек с Яндекса, но это не ровнять с тем прошлым количеством. Сайту тогда было более пол года уже, так-что не думаю что Яндекс подыскивал для него место. Гугл сечас дает всесь трафик.
    Но вот мой вопрос: Вы доюились повышения позиций в Яндексе как-нибудь, и что хоть нужно делать?

  5. Иван (zdorovko.info) says:

    ой не высветилось вот что добавте: / script

  6. Владимир Демянович (elims.org.ua) says:

    Спасибо за замечание, действительно забыл добавить закрывающий тег =)

    Вполне возможно шаблон создал кучу дублирующих страниц. Плюс где-то прописаны исходящие ссылки.

    У меня до сих пор трафик с яндекса ничтожно мал, по сравнению с Гуглом.

    Моя проблема была в копипасте и дублирующих страницах, когда от них избавился Яндекс добавил все мои страницы в индекс, но посещений все еще мало.

  7. Ever (all-themes.ru) says:

    Добрый день!
    При реализации обязательного количества символов я просто поставил проверку на количество символов в файле wp-comments-post.php в корне сайта что ни есть правильно (я так полагаю что при обновлении движка все должно слететь). Скажите как перенести это ограничение в файл wp-content/themes/my-theme/comments.php чтобы кнопка «Отправить» не была активна пока не наберется 100 сиволов.

  8. Владимир Демянович (elims.org.ua) says:

    Ever, добрый день, в конец записи добавил пример кода, для не активной кнопки. Код добавлять туда же, куда я и описывал.

  9. Ever (all-themes.ru) says:

    Спасибо за доработку и уделенное время!
    Просмотрев Ваш вариант я позволил себе его доработать. Задача стояла так: «Необходимо чтобы пользователи не имеющие одобренных комментариев вводили как минимум 100 символов, а если у него уже есть комментарии то достаточно только 30 символов», я считаю полезным когда необходим уникальный контент для сайта.
    Вот результат моей доработки:
    comments.php

    function comment_lenght() {
    var text = document.getElementById(‘comment’);
    var content = text.value;
    var contentwithoutspaces = content.replace(/\s+/g, »);
    var length = contentwithoutspaces.length;
    var commentlength = document.getElementById(‘commentlength’);
    if (get_var(«SELECT COUNT(*) FROM $wpdb->comments WHERE user_id = $current_user->ID AND comment_approved = 1»);
    echo $isset_user_comments;
    ?> == 0) {
    if (length < 100) {
    commentlength.innerHTML = 'Вы ввели ‘ + length + ‘ символов, без учета пробелов. Так как это Ваш первый комментарий Вам необходимо ввести 100 символов.’;
    commentform.submit.disabled = true;
    }
    else {
    commentlength.innerHTML = ‘Вы ввели ‘ + length + ‘ символов, без учета пробелов. Так как это Ваш первый комментарий Вам необходимо ввести 100 символов.’;
    commentform.submit.disabled = false;
    }
    } else {
    if (length < 30) {
    commentlength.innerHTML = 'Вы ввели ‘ + length + ‘ символов, без учета пробелов. Так как у Вас есть одобренные комментарии Вам необходимо ввести 30 символов.’;
    commentform.submit.disabled = true;
    }
    else {
    commentlength.innerHTML = ‘Вы ввели ‘ + length + ‘ символов, без учета пробелов. Так как у Вас есть одобренные комментарии Вам необходимо ввести 30 символов.’;
    commentform.submit.disabled = false;
    }
    }
    }

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

  10. Ever (all-themes.ru) says:

    Результат скрипта можете посмотреть на all-themes.ru под любым постом реализован данный скрипт.

Обсудить