JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input type='text' class='mask' />
<br />
<input type='hidden' class='hidden' />
<input type='button' value='GetValue' class='btn' />

<input type='button' class='toggle' value="Toggle" />

JavaScript

String.prototype.replaceAt=function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
}
var mask = '999-99-9999'
    hide = true;
$(function() {
    $('.hidden').val(mask);
    
    $.extend($.inputmask.defaults.definitions, {
                    '9': { 
                        validator: "[0-9*]",
                        cardinality: 1
                    }
                });
        
    $('.mask').inputmask({ 
        mask: mask,                
        onKeyValidation: function (result) {
            if(!result) return;
            var c = $('.mask').val().charAt(result.pos);
            if(c == '*') return;
            
            var text = $('.hidden').val();
            
            console.log(c, result.pos, text);
                        
            text = text.replaceAt(result.pos, c);
            console.log('new text', text);
            
            $('.hidden').val(text);
        } 
    });  
    
    $('.mask').on('keyup', function(e) {
        if(hide) {
            hideSymbols();
        }
    });
    
    function hideSymbols() {
        $('.mask').val($('.mask').val().replace(/[A-Za-z0-9]/g, '*'));
    }
    
    $('.btn').click(function() {
        alert($('.hidden').val());
    });
    
    $('.toggle').click(function() {
        if(hide) {            
            $('.mask').val($('.hidden').val());
        }
        else {
            hideSymbols();
        }
        
        hide = !hide;
    });
});