Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Форма отправки сообщения с подсчетом количества символов.

Поддержи проект!!!

Мы уже делали форму отправки сообщения – это раз! И потом мы делали подсчет количества символов в форме – это два!

И три – давайте их скрестим!

Не будем разжевывать все до последней капли, только вкратце алгоритм, что добавили:

1.Нам потребуется поле, в котором будем считать количество символов:

<input class="Stroka" size="4" value="0" name="Stroka" type="text" title="Кол-во символов">

2.Модифицируем наш скрипт из выше идущей ссылки:

Покрасим выше идущий инпут(когда количесвто символов перейдет наш придел.):

document.My_form.Stroka.style.color = "red"; 

Добавим новый класс нашему полю(который будет бликать красным)

document.getElementById("mess").classList.add("blink"); 

И покрасим цвет текста в красный(чтобы красный переходил в ркасный а не так. - красный переходит в черный - получается некрасиво...)

document.getElementById("mess").setAttribute("style", "color: red"

<script>

var peremennaya = 10;

function Count_elements() { var How_much = window.document.My_form.mess.value.length;  window.document.My_form.Stroka.value = peremennaya - How_much;   

if(How_much > peremennaya){ 

document.My_form.Stroka.style.color = "red"; 

document.getElementById("mess").classList.add("blink"); 

document.getElementById("mess").setAttribute("style", "color: red" ); 

  }

}  

</script> 

И тот класс. что мы будем присваивать, как только количество символов перейдет наши пределы...

.blink {

  -webkit-animation: blink 2s linear infinite;

  animation: blink 2s linear infinite;

}

@-webkit-keyframes blink {

  50%  { color: rgb(255, 0, 0); }

  51%  { color: rgba(255, 0, 0, 0); }

  100% { color: red; }

}

@keyframes blink {

  50%  { color: rgb(255, 0, 0); }

  51%  { color: rgba(255, 0, 0, 0); }

  100% { color: red; }

}

И добавили проверку в php строка 124 и 130 количество символов в имени и в сообщении.

В примере количество символов ограничено 10 символами.


Вас может еще заинтересовать список тем : #PHP | #PHP_POST | #JS | #CAPTCHA | #COUNT_SYMBOL |
Последняя дата редактирования : 2020-02-12 11:16
Название скрипта :Форма и подсчет количества введенных знаков(JS)
Скрипт № 73.8Ссылка на скачивение: Все скрипты на одной странице
Теги:
Форма отправки сообщения с подсчетом количества символов.

Последние комментарии :
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb