Tastierino numerico

spacca!  14 scarso!  0 versione stampa invia per email scheda utente totale visite  2183
semplice teastierino numerico in javascript e html. vedi l'esempio.
commenterò con più calma più avanti
<script type="text/javascript">
    function inserisci(numero) {                                                                                
        var valore = document.getElementById('display').value;                                                                                
        document.getElementById('display').value = valore + numero;
    }

    function cancella() {
        var len = document.getElementById('display').value.length;
        var str = document.getElementById('display').value.substr(0,len-1);
        document.getElementById('display').value=str;
    }
</script>
<style type="text/css">
    table#tastiera {
        border-collapse: collapse;
        width:145px;
    }
    div#contenitore {
        border:1px solid #707070;        
        padding:12px;
        width:145px;
        border-radius:4px;
    }
    table#tastiera input[type="text"] {
        border:1px solid #707070; 
        width: 141px;
        border-radius:4px;
    }
    table#tastiera input {        
        font-size: 1.3em;
        font-family: Courier;
    }
    table#tastiera input[type="button"],table#tastiera input[type="submit"] {
        width: 45px;
        height: 45px;
        cursor:pointer;
    }
</style>
<?php
if (isset($_POST['display'])) {
    echo "Codice " . $_POST['display'] . " inviato";
}
?>
<div id="contenitore">
    <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
        <table id="tastiera">
            <tr>
                <td colspan="3">
                    <input type="text" id="display" name="display" onload="focus()"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="1" value="1" onclick="inserisci(this.value)"/>    
                </td>
                <td>
                    <input type="button" id="2" value="2" onclick="inserisci(this.value)"/>    
                </td>
                <td>
                    <input type="button" id="3" value="3" onclick="inserisci(this.value)"/>    
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="4" value="4" onclick="inserisci(this.value)"/>    
                </td>
                <td>
                    <input type="button" id="5" value="5" onclick="inserisci(this.value)"/>    
                </td>
                <td>
                    <input type="button" id="6" value="6" onclick="inserisci(this.value)"/>    
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="7" value="7" onclick="inserisci(this.value)"/>    
                </td>
                <td>
                    <input type="button" id="8" value="8" onclick="inserisci(this.value)"/>    
                </td>
                <td>
                    <input type="button" id="9" value="9" onclick="inserisci(this.value)"/>    
                </td>
            </tr>        
            <tr>
                <td>
                    <input type="button" id="c" value="C" onclick="cancella()"/>
                </td>
                <td>
                    <input type="button" id="0" value="0" onclick="inserisci(this.value)"/>
                </td>
                <td>
                    <input type="submit" id="go" name="login" value="GO"/> 
                </td>
            </tr>
        </table>
    </form>
</div>
 
 

Inserisci un commento

non sei loggato

CAPTCHA