Sign upLogin

BankFacil/vanilla-masker

View on GitHub
Star
public/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
    <head>
        <title>VanillaMasker</title>
        <script src="../lib/vanilla-masker.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>VanillaMasker</h1>

        <fieldset>
            <legend>VMasker(element).maskMoney(options);</legend>

            <label for="default">Default</label>
            <input type="text" id="default" maxlength="7">

            <label for="zeroCents">Zero cents</label>
            <input type="text" id="zeroCents">

            <label for="unit">Unit R$</label>
            <input type="text" id="unit">

            <label for="suffixUnit">Suffix unit R$</label>
            <input type="text" id="suffixUnit">

            <label for="delimiter">Delimiter ","</label>
            <input type="text" id="delimiter">

            <label for="separator">Separator "."</label>
            <input type="text" id="separator">

            <label for="defaultValues">Default with values</label>
            <input type="text" id="defaultValues" value="1000">

            <label for="showSignal">Show signal</label>
            <input type="text" id="showSignal">
        </fieldset>

        <br>

        <fieldset>
            <legend>VMasker(element).maskNumber();</legend>

            <label for="numbers">Only numbers</label>
            <input type="text" id="numbers">
        </fieldset>

        <br>

        <fieldset>
            <legend>VMasker(element).maskPattern(pattern);</legend>

            <label for="phone">Phone</label>
            <input type="text" id="phone">

            <label for="phoneValues">Phone with values</label>
            <input type="text" id="phoneValues" value="3141232312">

            <label for="phoneValues">Phone with leading +1</label>
            <input type="text" id="leadingPlus" value="8888888888">

            <label for="date">Date</label>
            <input type="text" id="date">

            <label for="doc">Document</label>
            <input type="text" id="doc">

            <label for="carPlate">Car plate</label>
            <input type="text" id="carPlate">

            <label for="vid">Vehicle identification</label>
            <input type="text" id="vid">
        </fieldset>

        <script>
            (function() {
                // #maskMoney
                VMasker(document.getElementById("default")).maskMoney();
                VMasker(document.getElementById("defaultValues")).maskMoney();
                VMasker(document.getElementById("zeroCents")).maskMoney({zeroCents: true});
                VMasker(document.getElementById("unit")).maskMoney({unit: 'R$'});
                VMasker(document.getElementById("suffixUnit")).maskMoney({suffixUnit: 'R$'});
                VMasker(document.getElementById("delimiter")).maskMoney({delimiter: ','});
                VMasker(document.getElementById("separator")).maskMoney({separator: '.'});
                VMasker(document.getElementById("showSignal")).maskMoney({showSignal: true});

                // #maskNumber
                VMasker(document.getElementById("numbers")).maskNumber();

                // #maskPattern
                VMasker(document.getElementById("phone")).maskPattern('(99) 9999-9999');
                VMasker(document.getElementById("phoneValues")).maskPattern('(99) 9999-9999');
                VMasker(document.getElementById("leadingPlus")).maskPattern('+1 (999) 999-9999');
                VMasker(document.getElementById("date")).maskPattern('99/99/9999');
                VMasker(document.getElementById("doc")).maskPattern('999.999.999-99');
                VMasker(document.getElementById("carPlate")).maskPattern('AAA-9999');
                VMasker(document.getElementById("vid")).maskPattern('SS.SS.SSSSS.S.S.SSSSSS');
            })();
        </script>
    </body>
</html>