JSFiddle - React, Tailwind, and code Playground

by Uday Reddy

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 KEY_VALUES_MAP = {
    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 OFFSET = 500;
var prevButton;
var prevButtonOffset = 0;

var removeLastCharacter = function() {
	var str = $("#result").val();
  $("#result").val(str.substring(0, str.length - 1));
}

var getNextButtonValue = function(button_pressed, prevButtonOffset) {
	if(KEY_VALUES_MAP[button_pressed][prevButtonOffset + 1]) {
  	prevButtonOffset++;
	} else {
  	prevButtonOffset = 0;
  }
  return prevButtonOffset;
}

$(document).ready(function(){
    $("#phone").find("button").mouseup(function(event){
        var button_pressed = $(event.currentTarget).data("value")
        if (new Date().getTime() < ($(this).data('start') + OFFSET)){
        		//Short press
            if(button_pressed == prevButton) {
              prevButtonOffset = 
              getNextButtonValue(button_pressed, prevButtonOffset);
              removeLastCharacter();
            } else {
            	prevButtonOffset = 0;
            }
            prevButton = button_pressed;
            button_pressed 
            = KEY_VALUES_MAP[button_pressed][prevButtonOffset] 
        }
        $("#result").val(t9($("#result").val(),button_pressed))
    });
    $("#phone").find("button").mousedown(function(event){
    	$(this).data('start',new Date().getTime());
    });
})
function t9(text,button_pressed){
    text = text + button_pressed;
    return text
}