KeypadSimulation

A Simulation of Phone keypad using HTML, CSS and JQuery. This Simulation behaves as the Keypad in old Phones which everyone of us used at one point of our life. On long keo press, the number on the button will be typed, and depending on the number of button click, correponding alphabets wille be typed.

by Indu Prakash

HTML

<table id="phone">
    <tr>
        <td colspan="3">
            <input type="text" id="result" />
        </td>
    </tr>
    <tr>
        <td>
            <button data-value="1" class="key">1
                <span>. , !</span>
            </button>
        </td>
        <td>
            <button data-value="2" class="key">2
                <span>a b c</span>
            </button>
        </td>
        <td>
            <button data-value="3" class="key">3
                <span>d e f</span>
            </button>
        </td>
    </tr>
    <tr>
        <td>
            <button data-value="4" class="key">4
                <span>g h i</span>
            </button>
        </td>
        <td>
            <button data-value="5" class="key">5
                <span>j k l</span>
            </button>
        </td>
        <td>
            <button data-value="6" class="key">6
                <span>m n o</span>
            </button>
        </td>
    </tr>
    <tr>
        <td><button data-value="7" class="key">7
            <span>p q r s</span>
            </button>
        </td>
        <td>
            <button data-value="8" class="key">8
                <span>t u v</span>
            </button>
        </td>
        <td>
            <button data-value="9" class="key">9
                <span>w x y z</span>
            </button>
        </td>
    </tr>
    <tr>
        <td><button data-value="*" class="key">*</button></td>
        <td><button data-value="0" class="key">0</button></td>
        <td><button data-value="#" class="key">#</button></td>
    </tr>
</table>

CSS

#phone button{
    height: 50px;
    width: 75px;
}
#phone button span{
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
#result{
    width: 225px;
    height: 25px;
    margin-left:2px;
}

JavaScript

$(document).ready(function(){
    $("#phone").find("button").mouseup(function(event){
        resettimer = new Date().getTime();
        var button_pressed = $(event.currentTarget).data("value");
        if ( new Date().getTime() >= ( start + longpress )  ) {
            $("#result").val(tlong($("#result").val(),button_pressed));
        } else {
        $("#result").val(t9($("#result").val(),button_pressed));
        }
   })
    var longpress = 2000;
    // holds the start time
    var start;
    
    var resettimer;
    var resettime = 1500;

    $("#phone").find("button").on( 'mousedown', function( e ) {
        start = new Date().getTime();
        if(new Date().getTime() >= ( resettimer + resettime )){
            keycount1 = 0;
            keycount2 = 0;
            keycode = '';
        }
    } );

    $("#phone").find("button").on( 'mouseleave', function( e ) {
        start = 0;
    } );
})
var keycount1 = 0;// To store the number of keypress on each key. For example on key number 2, after 3 clicks, the output should reset to a.
var keycount2 = 0;
var keycode = ''; //To store the current character on the screen
function t9(text,button_pressed){
    var val = button_pressed; 
    //alert(keycount1)
    if((val == '7')||(val == '9')){ // in 7 and 9 , 4 albhabets are there, so seperated these two from others.
        var spantext4 = $('.key[data-value="'+val+'"] span').html(); // to get the alphabets inside each button. Insite the button the alphabets are in span tag
        var values4 = spantext4.split(' ');   // split these alphabets and store in an array called vallue4 
        if(jQuery.inArray(keycode,values4) == -1){ // checking if the keycode is present in the array. returns -1 if value is not in array
            keycount1 = 0; // if the value is not in array it means that the user clicked on a new button. sp we can reset the keypress counter.
        } else {
            text = text.slice(0,-1); // if the value is in the array, we delete the last...