JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="https://raw.github.com/zjs/jquery-ui/mask/ui/jquery.ui.mask.js"></script>
<input type="text" class="mask1"/>

JavaScript

$(function() {
    $(".mask1").mask({
        mask: "99/99/9999"
    });
    $("#mask2").mask({
        mask: "(999) 999-9999"
    });
    $("#mask3").mask({
        mask: "(999) 999-9999"
    }).blur(function(event) {
        if (!$(event.target).mask("valid")) {
            $(event.target).val("")
        }
    });;
    $("#mask4").mask({
        mask: "(999) 999-9999?x999999"
    });
    $("#mask5").mask({
        mask: "99-9999999",
        clearEmpty: false
    });
    $("#mask6").mask({
        mask: "999-99-9999",
        clearEmpty: false
    });
    $("#mask7").mask({
        mask: "a*-999-a999"
    });
    $("#mask8").mask({
        mask: "~9.99 ~9.99 999",
        definitions: {
            "~": /\+|-/
        }
    });
    $("#mask9").mask({
        mask: "hh:mm:ss pp",
        definitions: {
            hh: function(value) {
                value = parseInt(value, 10);
                if (value >= 1 && value <= 12) {
                    return (value < 10 ? "0" : "") + value;
                }
            },
            mm: sixty,
            ss: sixty,
            pp: function(value) {
                var lower = value.toLowerCase(),
                    character = lower.charAt(0);
                if (lower.length > 1 && lower.charAt(1) !== "m") {
                    return false;
                }
                switch (character) {
                case "a":
                    return "am";
                case "p":
                    return "pm";
                }
            }
        }
    });
    $("input").each(function(index, value) {
        var span = $("<span></span>");
        value = $(value);
        value.after(span);
        value.keyup(function(event) {
            span.text("Value: " + $(event.target).mask('value') + " Valid: " + $(event.target).mask('valid'));
        });
    });

    function sixty(value) {
        value = parseInt(value, 10);
        if (value >= 0 && value <= 59) {
            return (value < 10 ? "0" : "") +...