Input masks
Add masks onto form inputs
imask.js library allows to quickly add visible or invisible masks on your input forms.
Installation
Download and apply the following markup:
<body>
<!-- Just before </body> -->
<script src="/path/to/imask.js"></script>
<script src="/path/to/my-masks-options.js"></script>
<script src="/path/to/my-masks-native.js"></script>
</body>
Usage
Just add the attribute my-mask="nameOfTheOption"
on the specified input.
Options presets for imask.js are stored into a Javascript object named myMasksOptions
available from Window scope.
<div class="c-pos m-relative">
<input id="foo2"
type="tel"
my-mask="telFrance33"
autocomplete="off"
class="c-dim m-w-100 c-input">
<label for="foo2" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Téléphone portable</label>
</div>
<div>
<input type="text" id="w_mask_siret" my-mask="siret" autocomplete="off">
<label for="w_mask_siret">SIRET</label>
</div>
<div>
<input type="text" id="w_mask_date1" my-mask="dateNumeric" autocomplete="off">
<label for="w_mask_date1">Date sans contrôleur</label>
</div>
<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>
Custom options
Write your own imask.js options on the fly.
myMasksOptions['name_of_the_options'] = {
mask: '00BIO0000',
lazy: false, // make placeholder always visible
placeholderChar: '#' // defaults to '_'
}
Then use this options set on your input:
<div class="my-form">
<input type="text" id="id-1" my-mask="name_of_the_options" autocomplete="off">
<label for="id-1">Label</label>
</div>
Credit card case
<fieldset class="u-p-6 u-b-thin-neutral-600 u-brad-1">
<legend class="u-pl-3 u-pr-3">Carte de crédit</legend>
<div class="c-pos m-relative">
<input type="text"
class="c-input"
id="w_mask_credit_card_number"
my-mask="creditCardNumber"
autocomplete="off">
<label for="w_mask_credit_card_number" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Numéro de la carte</label>
</div>
<div class="c-pos m-relative u-mt-6">
<input type="text"
class="c-input"
id="w_mask_credit_card_date"
my-mask="creditCardDate"
autocomplete="off">
<label for="w_mask_credit_card_date" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Date d'expiration</label>
</div>
<div class="c-pos m-relative u-mt-6">
<input type="text"
class="c-input"
id="w_mask_credit_card_security"
my-mask="creditCardSecurityCode"
autocomplete="off">
<label for="w_mask_credit_card_security" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Code de sécurité</label>
</div>
</fieldset>
<!-- DEMO ONLY -->
<style>body { padding: 2em }</style>