JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<input type="tel" pattern="\d{3}-\d{3}-\d{4}" required="" />
<input type="submit" />

JavaScript

(function($, win, undef){
var n = 'pattern',      // name of plugin; subject to change
    def = 'initialize', // default method name
    defaults = {        // Default plugin options
        //TODO
    },
    methods = {         // Default plugin methods
        /**
         * HTML5 pattern attribute polyfill with basic masking capabilities
         *
         * @return jQuery object
         */
        initialize: function(options){
            return this.each(function(i, el){
                var $this = $(el),
                    data = $this.data(n),
                    // Extend the default options
                    settings = $.extend({}, defaults, options || {}),
                    pattern = this.pattern;
                if(!data){
                    // Initialize data object
                    //TODO
                    
                    // Set data object
                    $this.data(n, {
                        //TODO
                    });
                }
                console.log(el);
            });
        },
        /**
         * Dispose of the pattern features on specified objects
         * @return jQuery object
         */
        dispose: function(){
            return this.each(function(i, el){
                var $this = $(el);
                $this.removeData(n);
                $.error('Method `dispose` has yet to be implemented.');
            });
        }
    };
    
// expose functionality
$[n] = {
    options: defaults,
    fn: methods
};
$.fn[n] = function(method) {
    if(methods[method]){
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if(typeof method === 'object' || !method) {
        return methods[def].apply(this, arguments);
    } else {
        $.error('Method `' + method + '` does not exist on jQuery.mask');
    }
};
})(jQuery, this, undefined);
$('[pattern]').pattern();