input grafico per ip address

**stiffa** · 05-06-2007, 14:51

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

Codice PHP:


<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

**diegocoz** · 05-06-2007, 15:33

Non so come fare nello specifico, però secondo me se cerchi qualcosa sulle espressoni regolari imboccheresti la strada giusta.
Io le usate per verificare degli indirizzi email e funzionano alla grande. Magari se cerchi su internet trovi qualcosa, perchè penso che alla fine ci sia una logica di validazione anche dietro ad un indirizzo ip.

Magaris e trovi l'espressione regolare ad hoc postala qui che siamo tutti contenti.

**stiffa** · 05-06-2007, 15:38

ok per la validita e i caratteri...ma devo spostare il cursore dopo 3 cifre....tipo quando metti un serial key ....
Sicuramente qualcuno l'ha fatto perfetto...volevo sapere se c'era...

**stiffa** · 05-06-2007, 16:33

aiuto....io sto andando avanti con le prove nella speranza che qualche guru intervenga....

ora sono a questo punto

Codice PHP:




<html>

    <head>

    

<title>INPUT SOLO NUMERICA</title>        

<style type="text/css">

.myIn{

 background-image: url(img/bg_input.jpg); 



}

</style>

        <script type="text/javascript">

var keyPressed = 0;

function onlynum(e){

        myIn = document.getElementById('myInput');

        if(((e.keyCode>47)&&(e.keyCode<58))||((e.keyCode>95)&&(e.keyCode<106))||(e.keyCode==8)||(e.keyCode==116)||((e.keyCode>36)&&(e.keyCode<41))){

            if(((e.keyCode>47)&&(e.keyCode<58))||((e.keyCode>95)&&(e.keyCode<106))){

                if(keyPressed==3){

                    myIn.value = myIn.value + "     ";

                    keyPressed=1;

                }else

                    keyPressed++

                    

            }else if(e.keyCode==8){

                    keyPressed--;

                    

            }else if(e.keyCode==9){

                myIn.value = myIn.value + "     ";

            }

            

        }else

            return false;

            

        

            

   }



    

    

window.onload = function (){

    myIn = document.getElementById('myInput');

    myIn.focus();

    myIn.value = "   ";

}    

    

    

        </script>

    </head>

    <body>

    <input class = "myIn" type="text" id="myInput" maxlength="30" onkeydown="return onlynum(event);" />

    </body>

</html>

il fatto che non posso prendere il mouse e cliccare su un punto dell'input per scrivere il 3 byte dell'indizzo ip se prima non compilo i precedenti...
qualche trucco?
Penso che arrivare alla condizione ottimale possa far diventare questo codice un buon codice per tutti.....help

**stiffa** · 05-06-2007, 16:57

mi va anche bene che qualcuno mi dica come mettere 4 input text, senza sfondo (quello di default) ,ma che si veda quello che ci scrivo dentro...e magari poi dare uno sfondo a un td che li contiene tutti e simulare un unico input.....so gia che e' impossibile...

**diegocoz** · 05-06-2007, 17:36

questa mi pare una buona idea; perchè dici che è un problema vedere quello che ci scrivi dentro ? fai le 4 textbox vicine separate da un punto, nella onKeyPress di ciascuna controlli se preme INVIO oppure TAB oppure se ha già scritto tre cifre e sposti il focus sulla successiva. Avrai un codice un pò macchinoso ma penso si possa fare. poi alla fine di tutto chiami la routine per controllare l'ip completo (magari campo per campo controlli solo che vada da 0 a 255). Poi la veste grafica devi solo sbatterci la testa per adattarla al resto della TUA pagina.

Ciao

**stiffa** · 05-06-2007, 17:47

esatto!

prova e riprova ho messo 4 input in una tabella mettendo il bordo alla tabella e togliendolo ai singoli input il risultato e' quello che volevo..graficamente

Codice PHP:






<html>

    <head>

    

<title>INPUT SOLO NUMERICA</title>        

<style type="text/css">

.myIn{



border:0px;

width:30px;

margin:0px;



}







.mytable{border-top: 1px solid buttonshadow;

             border-left: 1px solid buttonshadow;

             border-right: 1px solid buttonshadow;

             border-bottom: 1px solid buttonshadow;

             border-color:#7F9DB9;

             margin: 0px;

}





</style>

        <script type="text/javascript">

var keyPressed = 0;

function onlynum(e){

    

        myIn_a = document.getElementById('myInput_a');

        if(((e.keyCode>47)&&(e.keyCode<58))||((e.keyCode>95)&&(e.keyCode<106))||(e.keyCode==8)||(e.keyCode==9)||(e.keyCode==116)||((e.keyCode>36)&&(e.keyCode<41))){

            if(((e.keyCode>47)&&(e.keyCode<58))||((e.keyCode>95)&&(e.keyCode<106))){

            }

                

        }else

            return false;

        

        

            

   }



    window.onload = function(){

        myIn_a = document.getElementById('myInput_a');

        myIn_b = document.getElementById('myInput_b');

        myIn_c = document.getElementById('myInput_c');

        myIn_d = document.getElementById('myInput_d');

        myIn_a.value="";

        myIn_b.value="";

        myIn_c.value="";

        myIn_d.value="";

        myIn_a.focus();

    

    }



    

        </script>

    </head>

    <body>

    

    <table bordeR="0" cellspacing="0"class="myTable"><tr><td>

    <input class = "myIn" type="text" id="myInput_a" maxlength="3" onkeydown="return onlynum(event);" /> . 

    <input class = "myIn" type="text" id="myInput_b" maxlength="3"  onkeydown="return onlynum(event);" /> . 

    <input class = "myIn" type="text" id="myInput_c" maxlength="3"  onkeydown="return onlynum(event);" /> . 

    <input class = "myIn" type="text" id="myInput_d" maxlength="3"  onkeydown="return onlynum(event);" />

    </td></tr></table>

    



    

    

    </body>

</html>

a questo punto vorrei che il cursore stia al centro del singolo input anche mentre scrivo dentro i numeri....qualche idea?

**diegocoz** · 05-06-2007, 18:11

nessuna idea.
ma sicuro che sia bello per l'utente avere il cursore che anzichè seguirlo si mette sempre al centro della textbox ? insomma, mi sembra un pò fuori standard.

**Andrea1979** · 05-06-2007, 18:22

Originariamente inviato da stiffa
a questo punto vorrei che il cursore stia al centro del singolo input anche mentre scrivo dentro i numeri....qualche idea?

un

codice:

text-align: center;

fa schifo?

**stiffa** · 06-06-2007, 00:24

beh....no....e' carino....ci provero

Discussione: input grafico per ip address

Strumenti discussione

Ricerca discussione

Visualizza

input grafico per ip address

Permessi di invio