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>