Форма добавления цифр с пробелами на jQuery
 | |
| Вашему вниманию интересное решение для сайта, это формат для добавление цифр, где автоматически преобразуется пробел, при задействовании jQuery. При создание любого по тематике сайта вам нужно сделать форму, где прописываем номер телефона, и здесь обязательно нужны пробелы в нужном месте. Вот этот скрипт автоматически выводит пробелы в тех самых местах, где пользователю или гостям сайта становится намного понятнее и безусловно легче прочесть, какая сумма в числах введена. Где реально для прочтение можно взять стандарт, как 8903474, а при помощи скрипта мы наблюдает такой расклад 8 903 474, что думаю многие согласятся, что второй вариант намного читабельный. Сам скрипт можно прописать на поле ввода input-а для пользователей, это в том случае, если данной форме будет ценовое поле, где аналогично вписанные цифры выстраиваются с пробелами. Установочный процесс: Для начало в корне сайта создаем папку files и закачиваем файл, что идет в архиве. Далее по месту установки выводи цифр: Код <script type="text/javascript" src="/files/jquery-1.9.1.min.js"></script> Если требуется форма, то так выглядит: Код <input type="text" value="" id="cifri" placeholder="Введите новое число"> <input type="text" value="45951" id="oldcifri" placeholder="Здесь старое число"> Так выглядит скрипт, что ставим на нужной странице: Код <script> function formatneed(chislo) { $(chislo).val($(chislo).val().replace(/\s+/g, '')); $(chislo).val($(chislo).val().replace(/(\d{1,3})(?=((\d{3})*)$)/g, " $1")); $(chislo).val($(chislo).val().replace(/^\s/g, '')); } $(document).ready(function(){ $('#cifri').bind("keyup", function() { formatneed(this); }); formatneed('#oldcifri'); }); </script> Здесь задействуем регулярные выражения для корректной работы. Запустить его можно вызвав функцию следующим образом: formatneed('#oldcifri'); Также здесь видим oldcifri - это идентификатор, где нужно поменять формат цифр. Рассмотрим как пример, который может быть таким: Код <div id="oldcifri">45951</div> Где сразу после запуска функции, то она найдет данный селектор и выведет число в нужном формате 45 951. Если вам нужно посмотреть работу скрипта на input-элементе, то здесь можно скачать готовый пример. Вкратце, то скрипт автоматически проверяет, нажата ли клавиша на селекторе #cifri. Если нажата, то сразу запускается функционал formatneed. Чтоб все корректно при работе показывало, то здесь требуется подключить библиотека jQuery, где не забываем об этом. Также можете посмотреть на demo страницу, как все работает. И как можно заметить, что здесь не подключена стилистика, где по сути нет стилей. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |