SO - 22701512

by mohamed yacine

HTML

<div id="result"></div>
<table class="dialpad" id="dialPad">
    <tbody>
        <tr>
            <td>
                <input type="button" class="button" value="1" data-values='[1]' />
            </td>
            <td>
                <input type="button" class="button" value="2" data-values='[2, "A", "B", "C"]' />
            </td>
            <td>
                <input type="button" class="button" value="3" data-values='[3, "D", "E", "F"]' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="button" value="4" data-values='[4, "G", "H", "I"]' />
            </td>
            <td>
                <input type="button" class="button" value="5" data-values='[5, "J", "K", "L"]' />
            </td>
            <td>
                <input type="button" class="button" value="6" data-values='[6, "M", "N", "O"]' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="button" value="7" data-values='[7, "P", "Q", "R", "S"]' />
            </td>
            <td>
                <input type="button" class="button" value="8" data-values='[8, "T", "U", "V"]' />
            </td>
            <td>
                <input type="button" class="button" value="9" data-values='[9, "W", "X", "Y", "Z"]' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="button" value="*" />
            </td>
            <td>
                <input type="button" class="button" value="0" />
            </td>
            <td>
                <input type="button" class="button" value="#" />
            </td>
        </tr>
    </tbody>
</table>

CSS

.button {
    position: relative;
    width: 62px;
    /*border: 1px solid black;*/
    border: 1px solid black;
    border-radius: 12px;
    /*border-radius: 7px;*/
    padding-top: 14px;
    padding-bottom: 29px;
    /*background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));*/
    /* Chrome,Safari4+ */
    background-color: White;
    Outline: none;
    padding-left:5px;
    margin-left:2px;
    margin-bottom:7px;
    height:43px;
    border-color:#ccc;
}
.dialpad {
    width: 193px;
    height: 161px;
    margin: 25px auto;
    border: 0px solid silver;
    border-radius: 4px;
    padding: 3px;
    text-align: center;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline:none;
}

JavaScript

var prev, $result = $('#result'),
    counter = 0,
    timer;
$('#dialPad input').click(function () {
    var values = $(this).data('values'),
        result = $result.text();
    if (this == prev) {
        result = result.slice(0, -1);
        counter = values.length == counter + 1 ? 0 : counter + 1;
    } else {
        counter = 0;
    }
    $result.text(result + values[counter]);
    prev = this;

    //timer to reset
    clearTimeout(timer)
    timer = setTimeout(function () {
        prev = undefined;
    }, 1000)
})