www.webdeveloper.com
Results 1 to 2 of 2

Thread: Masking Form Input with On-screen keyboard

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    Masking Form Input with On-screen keyboard

    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:
    Code:
    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:
    HTML Code:
    <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):
    Code:
    (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);

  2. #2
    Join Date
    Apr 2012
    Posts
    2
    Is there anything I can add to help get an answer to my query?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles