Masking Form Input with On-screen keyboard

[Mystarseed]

Okay, here's the situation. I'm building a form to gather information from a client. This form will be displayed using html, php and javascript on a touchscreen that has no external keyboard. To get over this input problem, I've created a working input keyboard that appears as part of the page, and uses javascript to know which input to place the characters in.

My problem is that besides this, I have to be able to mask the input for two important fields: Phone and Postal Code.

I can get both the mask and the input for the keyboard to work separately, but since the act of typing removes immediate focus from the field they are typing in, the mask stops working.

Is there an alternate mask, or a way of programming the mask into the keyboard javascript so that I can get both functions to work at the same time?

Keyboard JS:

function addIt(cKey)
{
selectedElement = (document.forms["GetName"].elements["focusedField"].value!='')?document.forms["GetName"].elements["focusedField"].value:"FirstName";
d = document.forms["GetName"].elements[selectedElement];
d.value =  (cKey.value=='delete') ? d.value.slice(0,-1) : ((cKey.value=='clear') ? "" : d.value+cKey.value);
}

Form + Keyboard HTML:

<script type="text/javascript">
jQuery(function($) {
    $('#phone').mask('999-999-9999');
	$('#postal').mask('a9a 9a9');
   });
   </script>

<form id="answerForm" name="answerForm" method="post" action ="process_pinfo.php">
	<label for="Name">Full Name:</label> <input type="text" id="Name" name="Name" onFocus='document.forms["answerForm"].elements["focusedField"].value = this.name' />
	<label for="phone">Phone:</label> <input type="text" id="phone" name="phone" onFocus='document.forms["answerForm"].elements["focusedField"].value = this.name' />
	<label for="Email">Email:</label> <input type="text" id="Email" name="Email" onFocus='document.forms["answerForm"].elements["focusedField"].value = this.name' />
	<label for="postal">PostalCode:</label> <input type="text" id="postal" name="postal" onFocus='document.forms["answerForm"].elements["focusedField"].value = this.name' />
	<input type='hidden' name='focusedField'>
	
	<!--Display Keyboard-->
	<div id="keyboard">
		
		<input type="button" class="touch" id="1" value="1" onclick="addIt(this)" />
		<input type="button" class="touch" id="2" value="2" onclick="addIt(this)" />
		<input type="button" class="touch" id="3" value="3" onclick="addIt(this)" />
		<input type="button" class="touch" id="4" value="4" onclick="addIt(this)" />
		<input type="button" class="touch" id="5" value="5" onclick="addIt(this)" />
		<input type="button" class="touch" id="6" value="6" onclick="addIt(this)" />
		<input type="button" class="touch" id="7" value="7" onclick="addIt(this)" />
		<input type="button" class="touch" id="8" value="8" onclick="addIt(this)" />
		<input type="button" class="touch" id="9" value="9" onclick="addIt(this)" />
		<input type="button" class="touch" id="0" value="0" onclick="addIt(this)" />
		<input type="button" class="touch" id="HYPHEN" value="-" onclick="addIt(this)" />
		<input type="button" class="touch" id="@" value="@" onclick="addIt(this)" /><br>
		
		<INPUT class="touch" type="button" value="Q" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="W" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="E" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="R" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="T" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="Y" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="U" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="I" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="O" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="P" onClick="addIt(this)">
		<input type="button" value="delete" onClick="addIt(this)" style='width:100px' class="touch"><BR>
		
		<INPUT class="touch" type="button" value="A" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="S" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="D" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="F" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="G" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="H" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="J" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="K" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="L" onClick="addIt(this)">
		<INPUT class="touch" type="button" value=".COM" style='width:100px' onClick="addIt(this)">
		<INPUT class="touch" type="button" value=".CA" style='width:80px' onClick="addIt(this)"><BR>
		
		<INPUT class="touch" type="button" value="Z" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="X" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="C" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="V" onClick="addIt(this)">
		<input type="button" value=" " onClick="addIt(this)" style='width:100px' class="touch">
		<INPUT class="touch" type="button" value="B" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="N" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="M" onClick="addIt(this)">
		<INPUT class="touch" type="button" value="," onClick="addIt(this)">
		<INPUT class="touch" type="button" value="." onClick="addIt(this)">
		<input type="button" value="clear" onClick="addIt(this)" style='width:100px' class="touch"><BR>
	</div>
</form>

Masking JS (sorry, this is from another page -digitalbush.com- and it is all bunched together as it's a C/P, and uses jquery.js as framework):

(function(a){var c=(a.browser.msie?"paste":"input")+".mask";var b=(window.orientation!=undefined);a.mask={definitions:{"9":"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"}};a.fn.extend({caret:function(e,f){if(this.length==0){return}if(typeof e=="number"){f=(typeof f=="number")?f:e;return this.each(function(){if(this.setSelectionRange){this.focus();this.setSelectionRange(e,f)}else{if(this.createTextRange){var g=this.createTextRange();g.collapse(true);g.moveEnd("character",f);g.moveStart("character",e);g.select()}}})}else{if(this[0].setSelectionRange){e=this[0].selectionStart;f=this[0].selectionEnd}else{if(document.selection&&document.selection.createRange){var d=document.selection.createRange();e=0-d.duplicate().moveStart("character",-100000);f=e+d.text.length}}return{begin:e,end:f}}},unmask:function(){return this.trigger("unmask")},mask:function(j,d){if(!j&&this.length>0){var f=a(this[0]);var g=f.data("tests");return a.map(f.data("buffer"),function(l,m){return g[m]?l:null}).join("")}d=a.extend({placeholder:"_",completed:null},d);var k=a.mask.definitions;var g=[];var e=j.length;var i=null;var h=j.length;a.each(j.split(""),function(m,l){if(l=="?"){h--;e=m}else{if(k[l]){g.push(new RegExp(k[l]));if(i==null){i=g.length-1}}else{g.push(null)}}});return this.each(function(){var r=a(this);var m=a.map(j.split(""),function(x,y){if(x!="?"){return k[x]?d.placeholder:x}});var n=false;var q=r.val();r.data("buffer",m).data("tests",g);function v(x){while(++x<=h&&!g[x]){}return x}function t(x){while(!g[x]&&--x>=0){}for(var y=x;y<h;y++){if(g[y]){m[y]=d.placeholder;var z=v(y);if(z<h&&g[y].test(m[z])){m[y]=m[z]}else{break}}}s();r.caret(Math.max(i,x))}function u(y){for(var A=y,z=d.placeholder;A<h;A++){if(g[A]){var B=v(A);var x=m[A];m[A]=z;if(B<h&&g[B].test(x)){z=x}else{break}}}}function l(y){var x=a(this).caret();var z=y.keyCode;n=(z<16||(z>16&&z<32)||(z>32&&z<41));if((x.begin-x.end)!=0&&(!n||z==8||z==46)){w(x.begin,x.end)}if(z==8||z==46||(b&&z==127)){t(x.begin+(z==46?0:-1));return false}else{if(z==27){r.val(q);r.caret(0,p());return false}}}function o(B){if(n){n=false;return(B.keyCode==8)?false:null}B=B||window.event;var C=B.charCode||B.keyCode||B.which;var z=a(this).caret();if(B.ctrlKey||B.altKey||B.metaKey){return true}else{if((C>=32&&C<=125)||C>186){var x=v(z.begin-1);if(x<h){var A=String.fromCharCode(C);if(g[x].test(A)){u(x);m[x]=A;s();var y=v(x);a(this).caret(y);if(d.completed&&y==h){d.completed.call(r)}}}}}return false}function w(x,y){for(var z=x;z<y&&z<h;z++){if(g[z]){m[z]=d.placeholder}}}function s(){return r.val(m.join("")).val()}function p(y){var z=r.val();var C=-1;for(var B=0,x=0;B<h;B++){if(g[B]){m[B]=d.placeholder;while(x++<z.length){var A=z.charAt(x-1);if(g[B].test(A)){m[B]=A;C=B;break}}if(x>z.length){break}}else{if(m[B]==z[x]&&B!=e){x++;C=B}}}if(!y&&C+1<e){r.val("");w(0,h)}else{if(y||C+1>=e){s();if(!y){r.val(r.val().substring(0,C+1))}}}return(e?B:i)}if(!r.attr("readonly")){r.one("unmask",function(){r.unbind(".mask").removeData("buffer").removeData("tests")}).bind("focus.mask",function(){q=r.val();var x=p();s();setTimeout(function(){if(x==j.length){r.caret(0,x)}else{r.caret(x)}},0)}).bind("blur.mask",function(){p();if(r.val()!=q){r.change()}}).bind("keydown.mask",l).bind("keypress.mask",o).bind(c,function(){setTimeout(function(){r.caret(p(true))},0)})}p()})}})})(jQuery);

[Mystarseed]

Is there anything I can add to help get an answer to my query?