Jump to content
  • entries
    18
  • comments
    0
  • views
    2288

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


Печенег

536 views

 Share

Посчитаем текущее количество символов в полях формы (в тегах 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.

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

Please enter your display name

×
×
  • Create New...

Important Information

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