iPad focus change

by Finn Espen Gundersen

HTML

<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"...

CSS

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}

JavaScript

$(".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;
}