$(".a").keypress(function(event){return kpress(this,event,moveon_ipad);});
$(".a").keydown (function(event){return kdn (this,event,moveon_ipad);});
$(".b").keypress(function(event){return kpress(this,event,moveon_notablet);});
$(".b").keydown (function(event){return kdn (this,event,moveon_notablet);});
function kdn(obj,ev,moveon){
var kc = ev.keyCode;
var prefix = obj.id[0];
var thisid = parseInt(obj.id.substring(1,obj.id.length));
var previd = (thisid-1)%7;
var nextid = (thisid+1)%7;
if(previd < 0) previd += 7;
var evprevdef = true;
if(kc == '8'){ $(obj).val(''); if(previd < thisid) moveon(obj,prefix+previd); }// BS
else if(kc == '32'){ $(obj).val(''); if(nextid > thisid) moveon(obj,prefix+nextid); }// SP
else if(kc == '37') moveon(obj, prefix+previd); // <-
else if(kc == '39') moveon(obj, prefix+nextid); // ->
else if(kc == '13') dosubmit(); // Enter
else {
evprevdef = false;
}
if(evprevdef) ev.preventDefault();
return !evprevdef;
}
function dosubmit(){
alert("Submit to server");
}
function moveon_ipad(fromobj,toidx){
var toobj = $('#'+toidx);
var t = $(toobj).val();
$(toobj).val($(fromobj).val());
$(fromobj).val(t);
var t = $(toobj).css("left");
$(toobj).css("left", ($(fromobj).css("left")));
$(fromobj).css("left",t);
var toobj2 = document.getElementById(toidx);
var t = toobj2.id;
var t2 = fromobj.id;
toobj2.id = "dummy"; // to ensure no two objects having same id
fromobj.id = t;
toobj2.id = t2;
}
function moveon_notablet(fromobj,toidx){
var toobj = $('#'+toidx);
toobj.focus();
}
function kpress(obj,ev,moveon){
var k = ev.which;
var prefix = obj.id[0];
var thisid = parseInt(obj.id.substring(1,obj.id.length));
var nextid = (thisid+1)%7;
if(k < 42){
ev.preventDefault();
return false;
}
var keypressed = String.fromCharCode(k).toUpperCase();
$(obj).val(keypressed);
moveon(obj,prefix+nextid);
ev.preventDefault();
return false;
}
<body>
<h1>Focuschange supporting iPad</h1>
<form id="form1">
<table style="position:relative" >
<tr>
<td>
<input class="a" type="text" id="a0" size="2" autofocus style="position:absolute;left:0px;background-color:#CCCCFF" />
<input class="a" type="text" id="a1" size="2" style="position:absolute;left:40px; background-color:#CCFFCC"/>
<input class="a" type="text" id="a2" size="2" style="position:absolute;left:80px;background-color:#CCFFFF" />
<input class="a" type="text" id="a3" size="2" style="position:absolute;left:120px;background-color:#FFCCCC"/>
<input class="a" type="text" id="a4" size="2" style="position:absolute;left:160px;background-color:#FFCCFF" />
<input class="a" type="text" id="a5" size="2" style="position:absolute;left:200px;background-color:#CCCCCC"/>
<input class="a" type="text" id="a6" size="2" style="position:absolute;left:240px;background-color:#FFFFCC" />
</td>
</tr>
</table>
</form>
<br />
<br />
<h1>Ordinary Focuschange</h1>
<form id="form2">
<table>
<tr>
<td>
<input class="b" type="text" id="b0" size="2" autofocus style="background-color:#CCCCFF" />
<input class="b" type="text" id="b1" size="2" style="background-color:#CCFFCC"/>
<input class="b" type="text" id="b2" size="2" style="background-color:#CCFFFF" />
<input class="b" type="text" id="b3" size="2" style="background-color:#FFCCCC"/>
<input class="b" type="text" id="b4" size="2" style="background-color:#FFCCFF" />
<input class="b" type="text" id="b5" size="2" style="background-color:#CCCCCC"/>
<input class="b" type="text" id="b6" size="2" style="background-color:#FFFFCC" />
</td>
</tr>
</table>
</form>
</body>
input.a {width:39px; height:39px; font-size:25px; font-weight:bold; background-color: transparent; border:none; padding: 0px; margin:0px; text-align:center; opacity:1}
input.b {width:39px; height:39px; font-size:25px; font-weight:bold; background-color: transparent; border:none; padding: 0px; margin:0px; text-align:center; opacity:1}