JSFiddle - React, Tailwind, and code Playground

by mavDev

HTML

<input type="text" name="" id="testip"/>
<script type="text/javascript">
    $( document ).ready(function() {
        $('#testip').ipmask();
    });
</script>

JavaScript

$.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

(function($){
    jQuery.fn.ipmask = function(opt){
        var param = $.extend({
                ver: 'v4'
            }, opt),
            input,curVal = {}, key, selStart, selEnd// set in onKeypress

            v4maskRegFull = new RegExp("^(25[0-5]|2[0-4][0-9]|[1][0-9]{2}|[1-9][0-9]|[0-9])(\\.(25[0-5]|2[0-4][0-9]|[1][0-9]{2}|[1-9][0-9]|[0-9])){3}$"),
            v4maskRegPart = new RegExp("^(25[0-5]|2[0-4][0-9]|[1][0-9]{2}|[1-9][0-9]|[0-9])((\\.)|(\\.(25[0-5]|2[0-4][0-9]|[1][0-9]{2}|[1-9][0-9]|[0-9])){0,1}){0,3}$"),
            v4maskDoubleDot = new RegExp("\\.\\."),

            placeholder = '  .  .  .  ',

            checkKey = function(val){

                // test inputed char
                if((v4maskRegPart.test(curVal.start+val+curVal.end) || v4maskRegPart.test(curVal.start+val+'.'+curVal.end)) && (!v4maskDoubleDot.test(curVal.start+val+curVal.end) || !v4maskDoubleDot.test(curVal.start+'.'+val+curVal.end))) return true;
                else return false;
            },

            // test to add next dot
            addDot = function(key){

                if(key != '.' && (!v4maskRegPart.test((curVal.start+key)+1+curVal.end) && v4maskRegPart.test(curVal.start+key+'.'+curVal.end))) {
                    return true;
                }
                return false;
            },

            setInput = function(str,selStart,key){
                // get array: explode by dot and remove empty elements from array
                parts = $.grep(str.length?str.split('.'):[str],function(item){
                   ...