OpenTimeTracker/application/forms/layouts/accountFormLayout.phtml

<?php echo $this->formstart(); ?>
<?php echo $this->fields['pin'] ?>
<div class="row">
    <div class="small-12 columns">
      <ul class="button-group even-3">
          <li><a id='seven' href="#" class="button keyButton secondary">7</a></li>
          <li><a id='eight' href="#" class="button keyButton secondary">8</a></li>
          <li><a id='nine' href="#" class="button keyButton secondary">9</a></li>
          <li><a id='four' href="#" class="button keyButton secondary">4</a></li>
          <li><a id='five' href="#" class="button keyButton secondary">5</a></li>
          <li><a id='six' href="#" class="button keyButton secondary">6</a></li>
          <li><a id='one' href="#" class="button keyButton secondary">1</a></li>
          <li><a id='two' href="#" class="button keyButton secondary">2</a></li>
          <li><a id='three' href="#" class="button keyButton secondary">3</a></li>
      </ul>
        <ul class="button-group even-2">
            <li><a id='zero' href="#" class="button keyButton secondary">0</a></li>
            <li><a href="#" class="clearKeyPad button keyButton secondary"><i class="fa fa-close"></i> Clear</a></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <?php echo $this->fields['submit'] ?>
        <?php echo $this->formend(); ?>
    </div>
</div>

<script>

    $(document).ready(function() {
        $('.keyButton').click(function() {
            $value = $(this).text();
            $("#pin").val($("#pin").val()+$value);
        });

        $('.clearKeyPad').click(function() {
            $("#pin").val('');
            $("#errorMessage").foundation('reveal','close');
            return false;
        });

        $(document).keyup(function(x) {
            if(x.which != 13)
            {
                $("#pin").focus();
                switch(x.keyCode) {
                    case 48:
                        $("#pin").val($("#pin").val()+'0');
                        $("#pin").blur();
                        break;
                    case 49:
                        $("#pin").val($("#pin").val()+'1');
                        $("#pin").blur();
                        break;
                    case 50:
                        $("#pin").val($("#pin").val()+'2');
                        $("#pin").blur();
                        break;
                    case 51:
                        $("#pin").val($("#pin").val()+'3');
                        $("#pin").blur();
                        break;
                    case 52:
                        $("#pin").val($("#pin").val()+'4');
                        $("#pin").blur();
                        break;
                    case 53:
                        $("#pin").val($("#pin").val()+'5');
                        $("#pin").blur();
                        break;
                    case 54:
                        $("#pin").val($("#pin").val()+'6');
                        $("#pin").blur();
                        break;
                    case 55:
                        $("#pin").val($("#pin").val()+'7');
                        $("#pin").blur();
                        break;
                    case 56:
                        $("#pin").val($("#pin").val()+'8');
                        $("#pin").blur();
                        break;
                    case 57:
                        $("#pin").val($("#pin").val()+'9');
                        $("#pin").blur();
                        break;
                }
            }

            $count = $("#pin").val().length;

            if($count == 4)
            {
                document.getElementById("auth_form").submit();
            }
        });



    });

</script>