«
»
jQueryWEB

JQuery скрипт для подсчета количества символов в текстовом поле

Привет друзья! В этом уроке вы узнаете, как написать скрипт jQuery, который должен отображать no. символов, введенных в текстовом поле в режиме реального времени.

Этот скрипт может быть очень полезен, если вы хотите показать пользователю, сколько символов он ввел в текстовое поле или текстовое поле. Особенно работает с формами проверки с ограничением символов и т.д.,

<!DOCTYPE html> <html> <head> <title>jQuery script to count the no. of characters in a textbox</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(function () { //lets use the jQuery Keyboard Event to catch the text typed in the textbox $('#txtbox').keyup(function () { //.val() will give the text from the textbox and .length will give the number of characters var txtlen = $(this).val().length; //.replace used here to replace the space in the string and .length is to count the characters var txtlennospace = $(this).val().replace(/\s+/g, '').length; //the below lines will display the results $('#txtbox_count').text(txtlen); $('#txtbox_count_no_space').text(txtlennospace); }); }); </script> </head> <body> <div style="padding-bottom: 10px;">jQuery - Realtime character counter</div> <div> Enter your text: <input style="padding: 7px;" maxlength="60" size="50" type="text" id="txtbox" /> <p>No. of characters with space : <span id="txtbox_count"></span></p> <p>No. of characters without space : <span id="txtbox_count_no_space"></span></p> </div> </body> </html>

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

Вы можете увидеть демо здесь:

http://www.tutorialsmade.com/demo/jquerytxtcount.html "jQuery JSON Parse пример демо"

Источник записи: https://www.tutorialsmade.com/jquery-script-count-number-characters-textbox/

Связанные записи
Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES

Chrome AppsGoogleGoogle ChromeWEBWordPressПолезные сайты

Как улучшить английский язык при написании в WordPress или автоматическая проверка грамматики в браузере.

LinuxWEBWEB - PHPWordPressВсе для разработки плагиновВсе для разработки шаблонов

Определите минимальную версию PHP для вашего кода?

WEBWEB - PHPПолезные сайты

Тестирование кода на старых PHP без необходимости понижения

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *