input grafico per ip address

[stiffa]

ciao...avevo dato un occhio con quelli di html ma mi consigliano l'uso di js per questa cosa...

voglio creare un input su misura per gli indirizzi ip.
A questo punto ho dato al mio input un immagine di fondo bianca con 3 punti neri (questi saranno i separatori...solo visivamente delle cifre dell'indirizzo ip.)

quindi scritto questo codice ma mi piacerebbe che qualcuno mi dicesse come rendere piu performante la cosa....penso si tratti di lavorare piu a fondo con stringhe e controlli

<style type="text/css">
.myIn{
 background-image: url(img/bg_input.jpg); 

}
</style>
<script language = "javascript" type="text/javascript">
var keyPressed = 0;
    function captureKey(){
        myInp = document.getElementById('myInput');
        
        if(keyPressed==3){
            
                myInp.value = myInp.value + "    ";
                keyPressed=0;
        }
        keyPressed++;
    }
window.onload=function(){
    myInp = document.getElementById('myInput');
    myInp.focus();
    myInp.value = "    ";
    
}

</script>

<input type="text" class="myIn" id="myInput" onkeyPress="captureKey()"> 

vorrei che si possano inserire indirizzi ip ...e non tipo 999.235.257.6700




grazie