t9

by Rahul

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

var last=null;
 var delay=null;
$(document).ready(function(){
   
    $("#phone").find("button").mouseup(function(event){
        var button_pressed = $(event.currentTarget).data("value")
        $("#result").val(t9($("#result").val(),button_pressed,event))
    });
     $("#phone").find("button").mousedown(function(event){
     	delay=event.timeStamp;
	  	 
	    });
     
})
function t9(text,button_pressed,event){
    var btnObj={
    			"1":[".",",","!"],"2":["a","b","c"],
                "3":["d","e","f"],"4":["g","h","i"],
                "5":["j","k","l"],"6":["m","n","o"],
                "7":["p","q","r","s"],"8":["t","u","v"],
                "9":["w","x","y","z"],"*":["*"],
                "0":["0"],"#":["#"]
                };
    
    var e=text.charAt(text.length-1);
    var btnArray=btnObj[button_pressed];
    var index=btnArray.indexOf(e);
   	last=last||event.timeStamp;
    var diff=event.timeStamp-last;
   	delay=event.timeStamp-delay;
	 console.log("delay",delay,diff,index);	
	if(delay>300){
		if(index==-1 || diff>500){
			 text+=button_pressed;
		}else {
		   	 text=text.substring(0,text.length-1)+button_pressed;
		}
	}else if(delay<70 && diff<600){
		 //subsequent press
			if(index==-1){
				text+=btnArray[0];
			}else{ 
				index= ++index<btnArray.length?index:0;
           		text=text.substring(0,text.length-1)+btnArray[index];
			}
			
		}else{
		//change press
				text+=btnArray[0];
			 
    	} 
    	last= event.timeStamp;

      
     
    return text
}