Перейти к содержанию
  • записей
    18
  • комментариев
    0
  • просмотра
    2212

JavaScript (jQuery) подсчет символов в input или textarea формы.


Печенег

511 просмотр

 Поделиться

Посчитаем текущее количество символов в полях формы (в тегах input и textarea), а также динамически отобразим их количество при изменении данных.

HTML: 

<input class="counted" value="Some test string. Hi!" >
<br>
<input class="counted" value="Some test string. Goodby!" >
<br>
<textarea class="counted">Another test</textarea>

CSS:

.counted + span {
   margin-left:10px;
}

JavaScript (jQuery):

$(document).ready(function() {
  $('.counted').each(function() { //для всех элементов с классом .counded
        $(this).after('<div>' + $(this).val().length + ' символов</div>'); //выведем калькуляцию после каждого поля
  });
});  

$('.counted').on('keyup', function() { //присоединяем событие нажатия кнопки для функции
  $(this).next('div').html($(this).val().length + ' символов');
});

Готово!

Пример:

See the Pen Подсчет символов в input, textarea by ITwing (@itwing) on CodePen.

 Поделиться

0 Комментариев


Рекомендуемые комментарии

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

Гость
Добавить комментарий...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Общий чат

Введите ваше имя

×
×
  • Создать...

Важная информация

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Политика конфиденциальности и Правила, в ином случаи просто покиньте его.