маска для ввода номера телефона чистый javascript

function createText ( text ) { 
    var t = document.createElement( 'span' ); 
    t.textContent = text; 
    t.style.width = text.length.toString() + 'em'; 
    t.style.height = '100%'; 
    t.style.textAlign = 'center'; 
    return t; 
} 
 
function createInput ( n ) { 
    var i = document.createElement( 'input' ); 
    i.type = 'text'; 
    i.__reg = new RegExp( '^\\d{0,' + n + '}$' ); 
    i.value = i.__oldValue = ''; 
    i.style.border = 'none'; 
    i.style.width = n.toString() + 'em'; 
    i.style.height = '100%'; 
    i.style.textAlign = 'center'; 
    i.style.outline = 'none'; 
    i.addEventListener( 'input', input ); 
    return i; 
} 
 
function input () { 
    if ( !this.__reg.test( this.value ) ) { 
        this.value = this.__oldValue; 
    } 
    else { 
        this.__oldValue = this.value; 
    } 
} 
 
 
var tel = document.getElementById( 'tel' ); 
 
// маска для ввода номера 
[ '+7(', 3, ')', 3, '-', 2, '-', 2 ].forEach( function ( i ) { 
    typeof i === 'string' ? tel.appendChild( createText( i ) ) : tel.appendChild( createInput( i ) ); 
} );

<div id="tel" style="display: inline-block; height: 20px; width: auto; border: 1px solid #607D8B;"></div>