Move Cursor textbox to textbox by arrow

Developed By Ravi Makwana [email protected]

by RaviMakwana

HTML

<br>
<input id='txt1' placeholder='1'> <input id='txt2' placeholder='2'> <input id='txt3' placeholder='3'> <br/>
<input id='txt4' placeholder='4'> <input id='txt5' placeholder='5'> <input id='txt6' placeholder='6'> <br/>
<input id='txt7' placeholder='7'> <input id='txt8' placeholder='8'> <input id='txt9' placeholder='9'> <br/>
<input id='txt11' placeholder='1'> <input id='txt12' placeholder='2'> <input id='txt13' placeholder='3'> <br/>
<input id='txt31' placeholder='4'> <input id='txt41' placeholder='5'> <input id='txt21' placeholder='6'> 
<input id='txt32' placeholder='7'> <input id='txt42' placeholder='8'> <input id='txt22' placeholder='9'>  
<input id='txt33' placeholder='1'> <input id='txt43' placeholder='2'> <input id='txt23' placeholder='3'>  
<input id='txt34' placeholder='4'> <input id='txt44' placeholder='5'> <input id='txt24' placeholder='6'>  
<input id='txt35' placeholder='7'> <input id='txt45' placeholder='8'> <input id='txt25' placeholder='9'>  
<input id='txt36' placeholder='1'> <input id='txt46' placeholder='2'> <input id='txt26' placeholder='3'>  
<input id='txt37' placeholder='4'> <input id='txt47' placeholder='5'> <input id='txt27' placeholder='6'>  
<input id='txt38' placeholder='7'> <input id='txt48' placeholder='8'> <input id='txt28' placeholder='9'>  
<input id='txt39' placeholder='1'> <input id='txt49' placeholder='2'> <input id='txt29' placeholder='3'>  
<input id='txt30' placeholder='4'> <input id='txt40' placeholder='5'> <input id='txt20' placeholder='6'>

CSS

div {
   width: 50px;
   height: 50px;
   background-color: black;
   color: white;
}

JavaScript

$(document).ready(function() {

   var moveUp = 20,
      moveDown = 20,
      moveLeft = 10,
      moveRight = 10;
   var maxTry = 10000;
   var maxWidth = $(document).width(),
      maxHeight = $(document).height();
   var SelectableElementTag = ["INPUT", "SELECT", "TEXTAREA", "BUTTON"];

   $(SelectableElementTag.join(',')).bind('keyup', function(e) { //$(document).on('keyup',SelectableElementTag.join(','),function(e){
      if (!e.ctrlKey)
         return;
      var x = $(this)[0].getClientRects()[0].left + 5,
         y = $(this)[0].getClientRects()[0].top + 5;

      var elem;

      for (var i = 0; i < maxTry; i++) {
         switch (e.keyCode) {
            case 37: //left
               x -= moveLeft;
               break;
            case 38: //up
               y -= moveUp;
               break;
            case 39: //right
               x += moveRight;
               break;
            case 40: // down
               y += moveDown;
               break;
         }
         elem = document.elementFromPoint(x, y);
         if (elem == undefined || SelectableElementTag.indexOf(elem.tagName) == -1 || $(elem).attr('id') == $(this).attr('id'))
            elem = undefined

         if (x < 0 && e.keyCode == 37) {
            x = maxWidth;
            y -= moveUp;
         }
         if (y < 0 && e.keyCode == 38) {
            y = maxHeight;
            x -= moveLeft;
         }
         if (x > maxWidth && e.keyCode == 39) {
            x = 0;
            y += moveDown;
         }
         if (y > maxHeight && e.keyCode == 40) {
            y = 0;
            x += moveRight;

         }
         //console.log(x,y)
         if (elem)
            break;
      }

      if (!elem)
         return;
      $(this).blur();
      $(elem).focus()

      $([document.documentElement, document.body]).animate({
         scrollTop: $(elem).offset().top - (screen.height / 2)
      }, 500);
   });
});