Функциональность счетчика живых символов — это то, что сообщает нам, сколько всего символов мы ввели в текстовое поле или текстовую область и сколько осталось.
С помощью счетчика живых символов вы можете показать живую индикацию того, сколько символов вы ввели и сколько вы можете ввести.
Количество введенных символов
Давайте иметь базовую HTML-структуру веб-страницы, которая имеет HTML-форму, а форма имеет поле textarea. В этом текстовом поле мы будем реализовывать нашу функциональность живого счетчика.
<!DOCTYPE html> <html> <head> <title>Live Characters Count</title> </head> <body> <h2>Live Characters Count</h2> <form action="/action_page.php"> <label for="message">Message:</label><br> <textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="liveCharactersCount(this);"></textarea><br> <input type="submit" value="Submit"> </form> <p id="characters-count-notification">0 characters</p> </body> </html>
Теперь создайте функцию и запустите ее по событию onkeyup textarea.
<script> function liveCharactersCount(obj){ document.getElementById("characters-count-notification").innerHTML = obj.value.length+' characters'; } </script>
Количество оставшихся символов
Чтобы оставшиеся символы считались функциональными, мы сделаем функцию javascript, которая имеет постоянную максимальную длину символов.
А затем мы вычтем количество введенных символов из этой константы максимальной длины, чтобы получить оставшиеся символы.
<!DOCTYPE html> <html> <head> <title>Remaining Characters Count</title> </head> <body> <h2>Remaining Characters Count</h2> <form action="/action_page.php"> <label for="message">Message:</label><br> <textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="remainingCharactersCount(this);"></textarea><br> <input type="submit" value="Submit"> </form> <p id="characters-count-notification">200 characters remaining</p> </body> </html>
Теперь давайте создадим функцию javascript для подсчета общего количества символов, а затем отобразим количество оставшихся символов.
<script> function remainingCharactersCount(obj){ var maxLength = 200; var charLength = obj.value.length; var charRemaining = (maxLength - charLength); if(charRemaining < 0){ document.getElementById("characters-count-notification").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>'; } else { document.getElementById("characters-count-notification").innerHTML = charRemaining+' characters remaining'; } } </script>
Поэтому просто добавьте приведенный выше код javascript в раздел заголовка HTML-страницы или в отдельный файл для вызова этой функции. Вы можете настроить его по своему усмотрению и сделать его более стильным с помощью CSS и начальной загрузки.