Merge pull request #32 from advation/keypress

Keypress

application/forms/accountForm.php

@@ -12,6 +12,7 @@ class accountForm extends Staple_Form
 		$pin = new Staple_Form_FoundationPasswordElement('pin','User PIN');
 		$pin->setRequired()
 			->addAttrib("readonly","true")
+			//->addAttrib("autofocus","true")
 			->addValidator(new Staple_Form_Validate_Length(1,4))
 			->addValidator(new Staple_Form_Validate_Numeric());
 

application/forms/layouts/accountFormLayout.phtml

@@ -3,19 +3,19 @@
 <div class="row">
     <div class="small-12 columns">
       <ul class="button-group even-3">
-          <li><button id='seven' value="7" href="#" class="button keyButton secondary">7</button></li>
-          <li><button id='eight' value="8" href="#" class="button keyButton secondary">8</button></li>
-          <li><button id='nine' value="9" href="#" class="button keyButton secondary">9</button></li>
-          <li><button id='four' value="4" href="#" class="button keyButton secondary">4</button></li>
-          <li><button id='five' value="5" href="#" class="button keyButton secondary">5</button></li>
-          <li><button id='six' value="6" href="#" class="button keyButton secondary">6</button></li>
-          <li><button id='one' value="1" href="#" class="button keyButton secondary">1</button></li>
-          <li><button id='two' value="2" href="#" class="button keyButton secondary">2</button></li>
-          <li><button id='three' value="3" href="#" class="button keyButton secondary">3</button></li>
+          <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><button id='zero' value="0" href="#" class="button keyButton secondary">0</button></li>
-            <li><button href="#" class="clearKeyPad button keyButton secondary"><i class="fa fa-close"></i> Clear</button></li>
+            <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>
@@ -27,27 +27,101 @@
 </div>
 
 <script>
+
     $(document).ready(function() {
         $('.keyButton').click(function() {
-            $value = $(this).val();
+            $value = $(this).text();
             $("#pin").val($("#pin").val()+$value);
-
-            var $count = $('#pin').val().length;
+            $count = $("#pin").val().length;
 
             if($count == 4)
             {
-                $("#auth_form").submit();
-            }
-            else
-            {
-                return false;
+                $("#submit").click();
             }
         });
 
-        $('.clearKeyPad').click(function(){
+        $('.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');
+                        break;
+                    case 49:
+                        $("#pin").val($("#pin").val()+'1');
+                        break;
+                    case 50:
+                        $("#pin").val($("#pin").val()+'2');
+                        break;
+                    case 51:
+                        $("#pin").val($("#pin").val()+'3');
+                        break;
+                    case 52:
+                        $("#pin").val($("#pin").val()+'4');
+                        break;
+                    case 53:
+                        $("#pin").val($("#pin").val()+'5');
+                        break;
+                    case 54:
+                        $("#pin").val($("#pin").val()+'6');
+                        break;
+                    case 55:
+                        $("#pin").val($("#pin").val()+'7');
+                        break;
+                    case 56:
+                        $("#pin").val($("#pin").val()+'8');
+                        break;
+                    case 57:
+                        $("#pin").val($("#pin").val()+'9');
+                        break;
+                    case 45:
+                        $("#pin").val($("#pin").val()+'0');
+                        break;
+                    case 35:
+                        $("#pin").val($("#pin").val()+'1');
+                        break;
+                    case 40:
+                        $("#pin").val($("#pin").val()+'2');
+                        break;
+                    case 34:
+                        $("#pin").val($("#pin").val()+'3');
+                        break;
+                    case 37:
+                        $("#pin").val($("#pin").val()+'4');
+                        break;
+                    case 12:
+                        $("#pin").val($("#pin").val()+'5');
+                        break;
+                    case 39:
+                        $("#pin").val($("#pin").val()+'6');
+                        break;
+                    case 36:
+                        $("#pin").val($("#pin").val()+'7');
+                        break;
+                    case 38:
+                        $("#pin").val($("#pin").val()+'8');
+                        break;
+                    case 33:
+                        $("#pin").val($("#pin").val()+'9');
+                        break;
+                }
+
+                $("#pin").blur();
+                $count = $("#pin").val().length;
+
+                if($count == 4)
+                {
+                    $("#submit").click();
+                }
+            }
+        });
     });
+
 </script>