818 27.09.2020 input maskjs JavaScript

Маска вводу

Маска вводу для input (номер телефону, дата, пошта, ip адреса тощо)

Часто на сайті необхідно встановити маску вводу номеру телефону, тощо. Нижче наведу приклад використання скрипта який вміє правильно наводити маску. Під словом "правильно" я маю наувазі адекватну маску при якій неможливо ввести нереальне значення, наприклад: ДАТА 99.99.9999 чи IP 999.999.999.999. В скрипта є готові функції для використання, такі як, datetime, email, ip та інші. Також звичайно можна вводити і свою маску, наприклад: 

  • латинське A - це всі символи A-Z
  • цифра 9 - це всі цифри від 0-9
  • кириличне Я - це всі символи А-Я

Для використання нам потрібно підключити бібліотеку jQuery та файлик з скриптом маски, нижче наведу приклад використання:

<label>Кирилиця</label>
<input data-inputmask="'mask': '9-ЯЯ-999999'" type="text" class="form-control">

<label for="date">Date (French)</label>
<input type="text" class="form-control" id="date" name="date" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-inputmask-placeholder="jj/mm/aaaa">

<label for="time">Time (12h)</label>
<input type="text" class="form-control" id="time" name="time" data-inputmask-alias="datetime" data-inputmask-inputformat="hh:MM" data-inputmask-placeholder="hh:mm">

<label for="time24">Time (24h)</label>
<input type="text" class="form-control" id="time24" name="time24" data-inputmask-alias="datetime" data-inputmask-inputformat="HH:MM" data-inputmask-placeholder="hh:mm">

<label for="datetime">Date and Time</label>
<input type="text" class="form-control" id="datetime" name="datetime" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy HH:MM" data-inputmask-placeholder="jj/mm/aaaa hh:mm">

<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" data-inputmask="'alias': 'email'">

<label for="credit-card">Credit card number</label>
<input type="text" class="form-control" id="credit-card" name="credit-card" data-inputmask="'mask': '9999 - 9999 - 9999 - 9999'">

<label for="currency">Currency</label>
<input type="text" class="form-control text-left" id="currency" name="currency" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '€ ', 'placeholder': '0'">

<label for="license-plate">French license plate</label>
<input type="text" class="form-control" id="license-plate" name="license-plate" data-inputmask="'mask': 'AA-999-AA'">

<label for="phone">Phone number (French)</label>
<input type="text" class="form-control" id="phone" name="phone" data-inputmask="'mask': '+33 9 99 99 99 99'">

<label for="ip">IP address</label>
<input type="text" class="form-control" id="ip" name="ip" data-inputmask="'alias': 'ip'">

Файл з проектом та скриптом ви можете скачати праворуч, автор скрипта Robin Herbots.

Потрібна допомога

Ми встановим, описаний в дані статті, чи будь-який інший, скрипт на Ваш сайт. Також Ви можете замовити індивідуальний скрипт, який буде повністю відповідати Вашим потребам.

Зв'яжіться з нами за контактами вказаними нижче, ми Вам надамо безкоштовну консультацію.

Контакти

Номери телефонів

+38 (093) 33 33 500

Електронна скринька

soft.dev.lviv@gmail.com

Адреса

Україна, Львівська обл., м. Червоноград