Дизайн формы: автоматическое форматирование вводимых данных

Дизайн формы: автоматическое форматирование вводимых данных

От автора: в этом уроке вы научитесь форматировать данные, введенные пользователем в поля формы, в реальном времени, что позволит менять нам дизайн формы. По мере ввода пользователем данных в поле формы значение будет автоматически подстраиваться, добавляя знаки пунктуации и тире, убирая пробелы, стирая лишние символы, изменяя регистр символов.

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

Мы рассмотрим два примера, в которых будем использовать 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 < len; i += split) {
    split = ( 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 разработчиками.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree