DWWEB.RU

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

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

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

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

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 символами.

Не забудь !
Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 62.2
Название скрипта и номер :Форма и подсчет количества введенных знаков(JS)
Пример - Форма и подсчет количества введенных знаков(JS)
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:
Форма отправки сообщения с подсчетом количества символов.

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