Від автора: у цьому уроці ви навчитеся форматувати дані, введені в поля форми, в реальному часі, що дозволить змінювати дизайн форми. По мірі введення даних у поле форми, значення буде автоматично підлаштовуватися, додаючи знаки пунктуації і тире, прибираючи прогалини, стираючи зайві символи, змінюючи регістр символів.
Даний метод може сильно допомогти користувачам під час введення даних. Процес стає легше, зменшується кількість можливих помилок, з’являється зворотний зв’язок, а також поліпшується користувальницький досвід.
Ми розглянемо два приклади, в яких будемо використовувати JQuery, API, методи і утиліти, які зроблять написання коду більш зручним і зрозумілим. Також вам допоможуть базові знання JQuery. Хоча вам доведеться розбиратися в коді, навіть якщо ви не вивчали дану бібліотеку. Поїхали!
Форматування валют
Щоб працювати паралельно зі мною, скопіюйте демо по посиланню. Демо являє собою текстове поле, приукрашенное стилями для презентабельності. Вкладка JS порожня, однак JQuery вже додано через тег і готовий до роботи!
Як видно з демо нижчою, в текстовому полі очікується введення суми грошей. Такий тип даних зазвичай можна зустріти в банках, платіжних системах і формах обміну валюти.
Я дуже часто стикався з двома проблемами у даного типу полів:
деяким людям (як мені) потрібно багато часу, щоб відрізнити 1000000 від 10000000, якщо не використовується спеціальний роздільник на тисячі. Це один або десять мільйонів?
деякі додають роздільник на тисячі вручну, що необов’язково. Значення може не пройти перевірку, що призведе до помилок.
Починаємо роботу з JavaScript
Для того, щоб форматувати вводиться значення, ми вибираємо елемент select і записуємо його в змінну.
var $form = $( “#form” );
var $input = $form.find( “input” );
Подія keyup
Потім необхідно до нашого поля причепити подія keyup, яке буде запускати в момент, коли користувач відпускає клавішу.
$input.on( “keyup”, function( event ) {
// 1.
var selection = window.getSelection().toString();
if ( selection !== “) {
return;
}
// 2.
if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
return;
}
} );
У цій функції ми додали пару рядків коду. Ці рядки захищають функцію від запуску, коли користувач:
робить вибір всередині поля
або натискає стрілку на клавіатурі.
В обох випадках поле не додаються нові символи, тобто функцію виконувати не потрібно.
Основна функція
Під секцією, яка запобігає функцію від запуску по натисненню стрілок, ми додамо наступний код. Це і є основна функція, яка буде форматувати значення.
// 1
var $this = $( this );
var input = $this.val();
// 2
var input = input.replace(/[\D\s\._\-]+/g, “”);
// 3
input = input ? parseInt( input, 10 ) : 0;
// 4
$this.val( function() {
return ( input === 0 ) ? “” : input.toLocaleString( “en-US” );
} );
Код виконує наступне:
витягає значення поля;
проганяє значення через формальний вираз за допомогою RegEx, видаляючи непотрібні символи, наприклад, прогалини, нижнє підкреслення, тире і букви;
для перевірки значення на ціле число запускається функція parseInt();
за допомогою функції toLocaleString() додається роздільник на тисячі, після чого значення повертається в поле.
Зверніть увагу: В якості роздільника може виступати як «,», так і «.». Все залежить від переданого коду країни в функцію toLocaleString() . Приміром, у Німеччині та Індонезії (de-DE і id-ID відповідно) використовується точка, а не кома.
Якщо спробувати демо ввести які-небудь невідповідні символи (тире або точка), вони будуть відразу ж видалені. Вводити можна лише числа, а роздільник на тисячі додається автоматично.
Форматування номера ліцензії
Інший приклад, де може знадобитися допомога з форматуванням введення – номер ліцензії. Наприклад, ліцензійний код або код покупки сайту Envato Market складається з 36 символів, серед яких літери, числа і кілька тире. Вкрай важливо ввести цей код на сайтах авторів статей, якщо вам потрібна підтримка!
Точно такий же тип даних можна зустріти в преміум теми WordPress і плагінах, де для отримання оновлень і використання практичних можливостей необхідно вказувати ліцензійний код.
У другому прикладі ми створили текстове поле з плейсхолдером, який підказує про формат ліцензійного номери. Як видно нижче, номер ліцензії складається з 32 символів з кількома тире, всі символи у верхньому регістрі.
Стартове демо
Щоб працювати паралельно зі мною, скопіюйте демо нижче!
Основна функція
Код залишиться колишнім, як і в першому прикладі, за винятком основної функції.
// 1
var $this = $(this);
var input = $this.val();
// 2
input = input.replace(/[\W\s\._\-]+/g “);
// 3
var split = 4;
var chunk = [];
for (var i = 0, len = input.length; i = 8 && i <= 16 ) ? 4 : 8;
chunk.push( input.substr( i, split ) );
}
// 4
$this.val(function() {
return chunk.join(“-“).toUpperCase();
});
Опис основної функції:
отримуємо значення з поля вводу;
видаляємо непотрібні символи, серед яких прогалини, точки, нижнє підкреслення і тире;
розбиваємо дані на 5 блоків. У першому і останньому блоках буде по 8 символів. Інші блоки (другий, третій і четвертий) будуть складатися з 4 символів;
з’єднуємо всі блоки за допомогою тире, переводимо всі символи у верхній регістр повертаємо значення в поле вводу.
Поле для вводу номера ліцензії готово! Спробуйте:
Бонус!
Погляньте на демо Донні Де Амато – поле для форматування дат:
Висновок
У цьому уроці ми розібрали два приклади з автоматичного форматування даних вводу, що робить роботу користувача з сайтом більш плавною.
Даний метод застосуємо до будь-якого типу даних, що вводяться. Його можна використовувати, наприклад, на поле імені користувача і перевіряти, щоб всі символи були в нижньому регістрі, а ім’я містило тільки літери. Також можна перевіряти поля прізвища та по батькові, щоб перша літера була у верхньому регістрі.
Що стосується відправки форми на сервер і перевірки даних, дружите з вашими back-end розробниками.
