jquerysimplemask

Simple and fast number input masks.

Usage no npm install needed!

<script type="module">
  import jquerysimplemask from 'https://cdn.skypack.dev/jquerysimplemask';
</script>

README

jQuerySimpleMask

Simple and fast number input masks

npm version

Usage

<form>
    <p>
        <label for="frCep">CEP</label><br/>
        <input type="text" name="frCep" id="frCep"/>
    </p>
    <p>
        <label for="frDtel">(DDD) Telefone</label><br/>
        <input type="text" name="frDtel" id="frDtel"/>
    </p>
    <p>
        <label for="frTel">Telefone</label><br/>
        <input type="text" name="frTel" id="frTel"/>
    </p>
    <p>
        <label for="frData">Data</label><br/>
        <input type="text" name="frData" id="frData"/>
    </p>
    <p>
        <label for="frCpf">CPF</label><br/>
        <input type="text" name="frCpf" id="frCpf"/>
    </p>
    <p>
        <label for="frCnpj">CNPJ</label><br/>
        <input type="text" name="frCnpj" id="frCnpj"/>
    </p>
    <p>
        <label for="frCallback">With Callback</label><br/>
        <input type="text" name="frCallback" id="frCallback"/>
    </p>
</form>

Helper mode

$(document).ready
(
    function()
    {
        $('#frCep' ).simpleMask( { 'mask': 'cep'     , 'nextInput': false } );
        $('#frDtel').simpleMask( { 'mask': 'ddd-tel9', 'nextInput': false } );
        $('#frTel' ).simpleMask( { 'mask': 'tel9'    , 'nextInput': false } );
        $('#frData').simpleMask( { 'mask': 'data'    , 'nextInput': false } );
        $('#frCpf' ).simpleMask( { 'mask': 'cpf'     , 'nextInput': false } );
        $('#frCnpj').simpleMask( { 'mask': 'cnpj'    , 'nextInput': false } );
    }
);

Custom mode

$(document).ready
(
    function()
    {
        $('#frCep' ).simpleMask( { 'mask': '#####-###'                          , 'nextInput': $('#frDtel') } );
        $('#frDtel').simpleMask( { 'mask': ['(##) ####-####', '(##) #####-####'], 'nextInput': $('#frTel' ) } );
        $('#frTel' ).simpleMask( { 'mask': ['####-####', '#####-####']          , 'nextInput': $('#frData') } );
        $('#frData').simpleMask( { 'mask': '##/##/####'                         , 'nextInput': $('#frCpf' ) } );
        $('#frCpf' ).simpleMask( { 'mask': '###.###.###-##'                     , 'nextInput': $('#frCnpj') } );
        $('#frCnpj').simpleMask( { 'mask': '##.###.###/####-##' } );
        $('#frCallback').simpleMask
        (
            {
                'mask'       : '#####',
                'nextInput'  : true,
                'onComplete' : function(element)
                {
                    console.log('onComplete', element);
                }
            }
        );
    }
);