Floating Key Board

[Total: 0    Average: 0/5]

The code displays a Floating Key Board for data entry into a form.

Head Code:

<STYLE>
 BODY {SCROLLBAR-FACE-COLOR: #ecd6a6; SCROLLBAR-HIGHLIGHT-COLOR: #d6d1b1; SCROLLBAR-SHADOW-COLOR: #d8ad49; SCROLLBAR-ARROW-COLOR: #af9538; SCROLLBAR-BASE-COLOR: #e9d096; scrollbar-3d-light-color: #FFFFFF; scrollbar-dark-shadow-color: #80FF00
}
.IP {height:18px;font-size:6px;}
.kb {position:relative;overflow:hidden;width:20px;height:16px;background-color:yellow;text-align:center;font-size:9px;border:solid black 1px;cursor:hand; }
</style>

<script type="text/javascript" language="JavaScript">
<!--
UpdateJS=0;
   day='15'; month='02'; year='2004';     // Date Updated
   Pday='15'; Pmonth='02'; Pyear='2004'; // Date Posted
//-->
</script>

Body Code:

<script language="JavaScript" type="text/javascript">
<!--
document.write('<style> .debug {VISIBILITY: hidden; POSITION: absolute; TOP: 520px; z-Index:100; }</style>')
<!---->
</script>
<div class=debug>
 <form name="Show">
 <input type="text" size="10" name="Show1" value="Show1">
 <input type="text" size="10" name="Show2" value="Show2">
 <input type="text" size="10" name="Show3" value="Show3">
 <input type="text" size="10" name="Show4" value="Show4">
 <input type="text" size="10" name="Show5" value="Show5">
 <input type="text" size="10" name="Show6" value="Show6">
 </form>
</div>

<center>
<b><font size="+2">JavaScript Code for</font></b><br><br>
<b><font size="+4" color="#FF0000">Floating Key Board</font><font size="+3" color="#FF0000"></font></b><br><br>
<font size="+1" color="#000000">
<script language="JavaScript" type="text/javascript">
<!--

if (UpdateJS){
 UpdateDate();
}
else {
 document.write('Off Line Version');
}

<!---->
</script>


</font>
<br><br>
<b><font size="+2">By Vic Phillips</font></b>   
<a href="http://homepage.ntlworld.com/vwphillips/"><font size="+1">http://homepage.ntlworld.com/vwphillips/</font></a>
<br>
<br>

<script language="JavaScript" type="text/javascript">
<!--
// Floating KeyBoard InPut kbPart1 (15-02-2004)
// by Vic Phillips
// http://homepage@ntlworld.com

// Notes
// Link Call Fields
//             Field 0     Field 1      Field 2
// kbShowKB( Form Name , Input Name , 'F' for the Full Key Board or the cell number of kbCustomArys containing the customised array )
// Example Link
// <form name=Examp1>
// Full Key Board <input type=text size=10 name=Ex1 >   <span class=kbLink onclick=kbShowKB('Examp1','Ex1','F');>KB</span><br>
// Customised Key Board <input type=text size=10 name=Ex1 >   <span class=kbLink onclick=kbShowKB('Examp1','Ex1',0);>KB</span><br>
// Forced Keyboard <input type=text size=10 name=Ex4 onkeypress="javascript:kbShowKB('Examp1','Ex4',2);return false">
// </form>

// Customise to Requirement
var kbBodyColor='silver';
var kbKeyColor='#E5E5E5';
var kbKeyHiColor='white';
var kbKeyTxtColor='black';
var kbZIndex=2;

// Customised Arrays - Any Name Can be used for the customised array
var CustomAry1=new Array('1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','#');
var CustomAry2=new Array('1','2','3','4','5','6','7','8','9','0','');
var CustomAry3=new Array('1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','a','b','c','d','e','f','#');

// Enter the  customised array names in cell 0 to .... - To use the array enter the cell number in field 2 of the call
var kbCustomArys=new Array(CustomAry1,CustomAry2,CustomAry3);

// The Class for the KeyBoard Link
document.write(
'<style>',
'.kbLink {position:relative;overflow:hidden;width:20px;height:16px;background-color:yellow;text-align:center;font-size:9px;border:solid black 1px;cursor:hand; } ',
'</style>')

<!---->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Floating KeyBoard InPut kbPart2 (15-02-2004)
// by Vic Phillips
// http://homepage@ntlworld.com

// No Need to Change
var kbKeyBoardW=0;
var kbKeyBoardH=110;
var kbKeyBoardT=0;
var kbKeyBoardL=0;
var kbString='';
var kbCaplock=0;
var kbshift=0;
var kbTarget=null;
var kbLast='';
var kbScrollIt=0;
var kbDragCk=1;
var kbTimeOut=null;
var kbInterval=null;
var kbScrollOld=0;
var kbAry=new Array();
var kbNuAry=new Array('1','2','3','4','5','6','7','8','9','0','-','=','[',']',';',''','#','',',','.','/');
var kbNSAry=new Array('!','"','£','$','%','^','&','*','(',')','_','+','{','}',':','@','~','|','<','>','?');
var kbLeAry=new Array('q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','Space')


function kbCC(sbeID){
 if (document.all){
  return (document.all[sbeID]);
 }
 else {
  return (document.getElementById(sbeID));
 }
}

function kbMakeKeyBoard(){
 kbWinWH();
 kbMouse();
 document.write(
 '<style>',
 '.kbKeyBoard { position:absolute;visibility:hidden;z-index:'+(kbZIndex)+';height:'+kbKeyBoardH+';background-color:'+kbBodyColor+';border:solid black 1px; } ',
 '.kbBut { position:absolute;z-index:'+(kbZIndex+1)+';overflow:hidden;width:16px;height:16px;top:5px;color:'+kbKeyTxtColor+';background-color:'+kbKeyColor+';border:solid black 1px;text-Align:center;font-size:10px;cursor:pointer; } ',
 '.kbDisplay { position:absolute;z-index:'+(kbZIndex+2)+';height:18px;top:2px;left:2px;font-size:10px; } ',
 '</style>',
 '<div id=kbKeyBoard class=kbKeyBoard > ',
 '<form name=kbDisplay>',
 '<input name=kbTyped id=kbTyped type=text size=30 class=kbDisplay >',
 '</form>',
 '<div id=kbEnter class=kbBut style=width:32px;height:33px; onclick=javascript:kbEnterIt(); >Enter</div>',
 '<div id=kbCapLock class=kbBut style=width:42px; onclick=javascript:kbCtl(1); >CapLock</div>',
 '<div id=kbShift class=kbBut style=width:42px; onclick=javascript:kbCtl(2); >Shift</div>',
 '<div id=kbBack class=kbBut style=width:32px; onclick=javascript:kbCtl(3); >Back</div>',
 '<div id=kbClear class=kbBut style=width:32px; onclick=javascript:kbCtl(4); >Clear</div>',
 '<div id=kbHide class=kbBut style=width:26px; onmouseover="javascript:kbOver('kbHide','Hide the Key Board');" onclick=javascript:kbCtl(5); >Hide</div>',
 '<div id=kbMove class=kbBut style=width:32px; onmouseover="javascript:kbOver('kbMove','Move the Key Board');" onclick=javascript:kbCtl(6); >Move</div>',
 '<div id=kbScroll class=kbBut style=width:32px; onmouseover="javascript:kbOver('kbScroll','Toggle Auto Scroll');" onclick=javascript:kbCtl(7); >Scroll</div>',
 '')
 for (kbi=0;kbi<kbNuAry.length;kbi++){
  document.write('<div id=kbNu'+kbi+' class=kbBut onclick=kbType(''+kbi+'',1); >'+kbNuAry[kbi]+'</div> ');
 }
 for (kbi1=0;kbi1<kbLeAry.length;kbi1++){
  document.write('<div id=kbLe'+kbi1+' class=kbBut onclick=kbType(''+kbi1+'',2); >'+kbLeAry[kbi1].toUpperCase( )+'</div> ');
 }
 for (kb=0;kb<kbCustomArys.length;kb++){
  for (kbi=0;kbi<kbCustomArys[kb].length;kbi++){
   document.write('<div id=kbCust'+kb+kbi+' class=kbBut onclick=kbType(''+kbi+'',0); >'+(kbCustomArys[kb][kbi])+'</div> ');
  }
 }
 document.write('</div>');
}

function kbResetBut(){
 for (kb=0;kb<kbCustomArys.length;kb++){
  for (kbi=0;kbi<kbCustomArys[kb].length;kbi++){
   kbCC(('kbCust'+kb+kbi)).style.left='2px';
   kbCC(('kbCust'+kb+kbi)).style.top='2px';
  }
 }
 for (kbi=0;kbi<kbLeAry.length;kbi++){
  kbCC(('kbLe'+kbi)).style.left='2px';
  kbCC(('kbLe'+kbi)).style.top='2px';
 }
 for (kbi=0;kbi<kbNuAry.length;kbi++){
  kbCC(('kbNu'+kbi)).style.left='2px';
  kbCC(('kbNu'+kbi)).style.top='2px';
 }
 kbCC('kbCapLock').style.top='2px';
 kbCC('kbCapLock').style.left='2px';
 kbCC('kbShift').style.top='2px';
 kbCC('kbShift').style.left='2px';
}

function kbCustKeyBd(kb){
 kbButNu=Math.floor(kbAry.length/4)+1;
 if (kbButNu<4){
  kbButNu=4;
 }
 kbKeyBoardW=((kbButNu*18)+38)
 kbCC('kbKeyBoard').style.width=(kbKeyBoardW)+'px';
 kbCC('kbTyped').style.width=(kbKeyBoardW-6)+'px';
 kbCC(('kbLe26')).style.width=(10)+'px';
 kbCC('kbEnter').style.top='56px';
 kbCC('kbEnter').style.left=(kbKeyBoardW-36)+'px';
 kbCC('kbBack').style.top='22px';
 kbCC('kbBack').style.left=(kbKeyBoardW-36)+'px';
 kbCC('kbClear').style.top='39px';
 kbCC('kbClear').style.left=(kbKeyBoardW-36)+'px';
 kbCC('kbScroll').style.top='90px';
 kbCC('kbScroll').style.left='2px';
 kbCC('kbHide').style.top='90px';
 kbCC('kbHide').style.left=(kbKeyBoardW/2-13)+'px';
 kbCC('kbMove').style.top='90px';
 kbCC('kbMove').style.left=(kbKeyBoardW-36)+'px';
 kbButT=22;
 kbButL=0;
 kbButR=kbButNu;
 for (kbi=0;kbi<kbAry.length;kbi++){
  kbCC(('kbCust'+kb+kbi)).style.left=(kbButL*18+2)+'px';
  kbCC(('kbCust'+kb+kbi)).style.top=(kbButT)+'px';
  kbButL++;
  if (kbi==kbButR-1){
   kbButL=0;
   kbButR=kbButR+kbButNu;
   kbButT=kbButT+17;
  }
 }
}

function kbFullKeyBd(){
 kbKeyBoardW=270;
 for (kbi=0;kbi<12;kbi++){
  kbCC(('kbNu'+kbi)).style.left=(2+kbi*18)+'px';
  kbCC(('kbNu'+kbi)).style.top=(22)+'px';
 }
 for (kbi=12;kbi<14;kbi++){
  kbCC(('kbNu'+kbi)).style.left=(kbi*18-26)+'px';
  kbCC(('kbNu'+kbi)).style.top=(39)+'px';
 }
 for (kbi=14;kbi<17;kbi++){
  kbCC(('kbNu'+kbi)).style.left=(kbi*18-72)+'px';
  kbCC(('kbNu'+kbi)).style.top=(56)+'px';
 }
 for (kbi=17;kbi<kbNuAry.length;kbi++){
  kbCC(('kbNu'+kbi)).style.left=(kbi*18-172)+'px';
  kbCC(('kbNu'+kbi)).style.top=(73)+'px';
 }
 kbCC(('kbNu17')).style.left=(kbi*18-370)+'px';
 for (kbi1=0;kbi1<10;kbi1++){
  kbCC(('kbLe'+kbi1)).style.left=(10+kbi1*18)+'px';
  kbCC(('kbLe'+kbi1)).style.top=(39)+'px';
 }
 for (kbi2=10;kbi2<19;kbi2++){
  kbCC(('kbLe'+kbi2)).style.left=(kbi2*18-162)+'px';
  kbCC(('kbLe'+kbi2)).style.top=(56)+'px';
 }
 for (kbi3=19;kbi3<26;kbi3++){
  kbCC(('kbLe'+kbi3)).style.left=(kbi3*18-316)+'px';
  kbCC(('kbLe'+kbi3)).style.top=(73)+'px';
 }
 kbCC('kbNu9').style.width=(16)+'px';
 kbCC(('kbLe26')).style.width=(104)+'px';
 kbCC(('kbLe26')).style.left=(82)+'px';
 kbCC(('kbLe26')).style.top=(90)+'px';
 kbCC('kbEnter').style.top='56px';
 kbCC('kbEnter').style.left='234px';
 kbCC('kbCapLock').style.top='90px';
 kbCC('kbCapLock').style.left='37px';
 kbCC('kbShift').style.top='90px';
 kbCC('kbShift').style.left='189px';
 kbCC('kbBack').style.top='22px';
 kbCC('kbBack').style.left='218px';
 kbCC('kbClear').style.top='39px';
 kbCC('kbClear').style.left='226px';
 kbCC('kbHide').style.top='73px';
 kbCC('kbHide').style.left='206px';
 kbCC('kbMove').style.top='90px';
 kbCC('kbMove').style.left='234px';
 kbCC('kbScroll').style.top='90px';
 kbCC('kbScroll').style.left='2px';
 kbCC('kbKeyBoard').style.left=(kbKeyBoardL)+'px';
 kbCC('kbKeyBoard').style.top=(kbKeyBoardT)+'px';
 kbCC('kbKeyBoard').style.width=(kbKeyBoardW)+'px';
 kbCC('kbTyped').style.width=(kbKeyBoardW-6)+'px';
}

function kbType(kb,kbR){
 if (kbR=='0'){
  kbCase=kbAry[kb];
  if (kbCase==''){
   kbCase=' ';
  }
 }
 else if (kbR==1){
  kbCase=kbNuAry[kb];
  if (kbshift){
   kbCase=kbNSAry[kb];
  }
  if (kbCase=='<'){
   kbCase='<';
  }
 }
 else {
  kb=kbCC('kbLe'+kb).innerHTML;
  kbCase=kb.toLowerCase();
  if (kbCaplock||kbshift){
   kbCase=kb.toUpperCase();
  }
 }
 if (kbCase=='SPACE'||kbCase=='space'){
  kbCase=' ';
 }
 kbString+=kbCase;
 document.kbDisplay.kbTyped.value=kbString;
}

function kbEnterIt(){
 if (kbTarget!=''){
  eval(kbTarget+'=kbString');
 }
 kbCtl(5);
}

function kbShowKB(kbf,kbip,kbc){
 kbTarget='document.'+kbf+'.'+kbip+'.value';
 if (kbTarget==kbLast){
  kbCtl(5);
 }
 else{
  kbLast=kbTarget;
  kbResetBut();
  if (kbc=='F'||kbc==null){
   kbAry=kbLeAry;
   kbFullKeyBd();
  }
  else {
   kbAry=kbCustomArys[kbc];
   kbCustKeyBd(kbc);
  }
  kbShow();
 }
}

function kbShow(){
 kbScrollIt=1;
 kbCtl(7);
 kbMouse();
 if (document.all){
  kbPosXNow=event.clientX;
  kbPosYNow=event.clientY;
 }
 kbString=eval(kbTarget);
 document.kbDisplay.kbTyped.value=kbString;
 kbYOS=-(kbKeyBoardH/2);
 kbXOS=10+eval(kbScrollLeft);
 kbCC('kbKeyBoard').style.top=(kbPosYNow+kbYOS+eval(kbScrollTop))+'px';
 kbCC('kbKeyBoard').style.left=(kbPosXNow+kbXOS)+'px';
 if (parseInt(kbCC('kbKeyBoard').style.top)<eval(kbScrollTop)){
  kbCC('kbKeyBoard').style.top=(eval(kbScrollTop)+10)+'px';
 }
 if (parseInt(kbCC('kbKeyBoard').style.top)>eval(kbScrollTop)+kbWinH-kbKeyBoardH-20){
  kbCC('kbKeyBoard').style.top=(eval(kbScrollTop)+kbWinH-kbKeyBoardH-20)+'px';
 }
 if (parseInt(kbCC('kbKeyBoard').style.left)+kbKeyBoardW+20>kbWinW+eval(kbScrollLeft)){
  kbCC('kbKeyBoard').style.left=(kbPosXNow-kbKeyBoardW-20+eval(kbScrollLeft))+'px';
 }
 kbKBShow();
}

function kbCtl(kb){
 if (kb==1){
  if (!kbCaplock){
   kbCaplock=1;
   kbCC('kbCapLock').style.backgroundColor=kbKeyHiColor;
  }
  else {
   kbCaplock=0;
   kbCC('kbCapLock').style.backgroundColor=kbKeyColor;
  }
 }
 if (kb==2){
  if (!kbshift){
   kbshift=1;
   kbCC('kbShift').style.backgroundColor=kbKeyHiColor;
   for (kbi=0;kbi<kbNuAry.length;kbi++){
    kbCC(('kbNu'+kbi)).innerHTML=kbNSAry[kbi];
   }
  }
  else {
   kbshift=0;
   kbCC('kbShift').style.backgroundColor=kbKeyColor;
   for (kbi=0;kbi<kbNuAry.length;kbi++){
    kbCC(('kbNu'+kbi)).innerHTML=kbNuAry[kbi];
   }
  }
 }
 if (kb==3){
   kbBackString=kbString.substring(0,kbString.length-1);
   kbString=kbBackString;
   document.kbDisplay.kbTyped.value=kbString;
 }
 if (kb==4){
   kbString='';
   document.kbDisplay.kbTyped.value=kbString;
 }
 if (kb==5){
  kbLast='';
  kbKBVis('visible')
  kbCC('kbKeyBoard').style.visibility='hidden';
 }
 if (kb==6){
  kbDragInit();
 }
 if (kb==7){
  if (!kbScrollIt){
   kbScrollIt=1;
   kbScrollOld=eval(kbScrollTop);
   kbInterval=setInterval('kbScrollCk()',500);
   kbCC('kbScroll').style.backgroundColor=kbKeyHiColor;
  }
  else {
   kbScrollIt=0;
   kbCC('kbScroll').style.backgroundColor=kbKeyColor;
   clearInterval(kbInterval);
  }
 }
}

function kbOver(kbID,kbMess){
 if (kbDragCk){
  document.kbDisplay.kbTyped.value=kbMess;
  kbCC(kbID).onmouseout=kbOut;
 }
}

function kbOut(){
 if (kbDragCk){
 document.kbDisplay.kbTyped.value=kbString;
 }
}

function kbWinWH(){
 if (document.all){
  kbScrollTop='document.body.scrollTop';
  kbScrollLeft='document.body.scrollLeft';
  kbWinH=document.body.clientHeight;
  kbWinW=document.body.clientWidth;
  }
  else if (document.getElementById){
   kbScrollTop='window.pageYOffset';
   kbScrollLeft='window.pageXOffset';
   kbWinH=window.innerHeight;
   kbWinW=window.innerWidth;
  }
 kbWinC=Math.round(kbWinW/2);
}

function kbScrollCk(){
 if (kbScrollOld!=eval(kbScrollTop)){
  kbCC('kbKeyBoard').style.top=(parseInt(kbCC('kbKeyBoard').style.top)+eval(kbScrollTop)-kbScrollOld)+'px';
  kbScrollOld=eval(kbScrollTop);
 }
}

function kbMouse(){
 if (!document.all) document.captureEvents(Event.MOUSEMOVE)
  document.onmousemove = kbDragXY;
}

function kbDragXY(e){
 if (!document.all){
  kbPosXNow=e.pageX-eval(kbScrollLeft);
  kbPosYNow=e.pageY-eval(kbScrollTop);
 }
 else {
  kbPosXNow=event.clientX;
  kbPosYNow=event.clientY;
 }
}

function kbDragInit(){
 clearTimeout(kbTimeOut)
 if (kbDragCk){
  kbDragCk=0;
  document.kbDisplay.kbTyped.value='Click to Anchor';
  kbCC('kbMove').style.backgroundColor=kbKeyHiColor;
  kbBarYPos=parseInt(kbCC('kbKeyBoard').style.top);
  kbBarXPos=parseInt(kbCC('kbKeyBoard').style.left);
  kbDragXOS=kbPosXNow-kbBarXPos
  kbDragYOS=kbPosYNow-kbBarYPos
  kbDragDoIt();
  kbKBVis('hidden');
 }
 else {
  kbDragCk=1;
  kbCC('kbMove').style.backgroundColor=kbKeyColor;
  document.kbDisplay.kbTyped.value=kbString;
  kbKBVis('visible');
  kbKBShow();
 }
}

function kbDragDoIt(){
 if (parseInt(kbCC('kbKeyBoard').style.left)>0&&parseInt(kbCC('kbKeyBoard').style.left)+kbKeyBoardW<kbWinW-10+eval(kbScrollLeft)&&parseInt(kbCC('kbKeyBoard').style.top)>eval(kbScrollTop)&&parseInt(kbCC('kbKeyBoard').style.top)+kbKeyBoardH<eval(kbScrollTop)+kbWinH){
  kbCC('kbKeyBoard').style.top=(kbPosYNow-kbDragYOS)+'px';
  kbCC('kbKeyBoard').style.left=(kbPosXNow-kbDragXOS)+'px';
  kbTimeOut=setTimeout('kbDragDoIt()',10);
 }
 else {
  kbDragCk=1;
  document.kbDisplay.kbTyped.value=kbString;
  if (parseInt(kbCC('kbKeyBoard').style.left)<=0){
   kbCC('kbKeyBoard').style.left='5px';
  }
  if (parseInt(kbCC('kbKeyBoard').style.left)+kbKeyBoardW>=kbWinW-10+eval(kbScrollLeft)){
   kbCC('kbKeyBoard').style.left=(kbWinW-15-kbKeyBoardW+eval(kbScrollLeft))+'px';
  }
  if (parseInt(kbCC('kbKeyBoard').style.top)<=eval(kbScrollTop)){
   kbCC('kbKeyBoard').style.top=(eval(kbScrollTop)+5)+'px';
  }
  if (parseInt(kbCC('kbKeyBoard').style.top)+kbKeyBoardH>=eval(kbScrollTop)+kbWinH){
   kbCC('kbKeyBoard').style.top=(eval(kbScrollTop)+kbWinH-kbKeyBoardH-5)+'px';
  }
 }
}

function kbKBShow(){
 kbCC('kbKeyBoard').style.visibility='visible';
 var kbx=document.all['kbKeyBoard'].style.pixelLeft;
 var kby=document.all['kbKeyBoard'].style.pixelTop;
 for (kbi=0; kbi<document.all.tags('select').length; kbi++) {
  kbobj=document.all.tags('select')[kbi];
  if (!kbobj||!kbobj.offsetParent)
   continue;
   // Find the element's offsetTop and offsetLeft relative to the BODY tag.
   kbobjLeft=kbobj.offsetLeft;
   kbobjTop=kbobj.offsetTop;
   kbobjParent=kbobj.offsetParent;
   while (kbobjParent.tagName.toUpperCase()!="BODY"){
    kbobjLeft+= kbobjParent.offsetLeft;
    kbobjTop+= kbobjParent.offsetTop;
    kbobjParent=kbobjParent.offsetParent;
   }
   // Adjust the element's offsetTop relative to the dropdown menu
   kbobjTop=kbobjTop-kby;
   if (kbx>(kbobjLeft+kbobj.offsetWidth)||kbobjLeft>(kbx+document.all['kbKeyBoard'].offsetWidth));
   else if (kbobjTop>document.all['kbKeyBoard'].offsetHeight);
   else if ((kby+document.all['kbKeyBoard'].offsetHeight)<=10);
   else
    kbobj.style.visibility="hidden";
 }
}

function kbKBHide(){
 for (kbi=0;kbi<document.all.tags('select').length;kbi++) {
  kbobj=document.all.tags('select')[kbi];
  if (!kbobj||!kbobj.offsetParent)
   continue;
   kbobj.style.visibility='hidden';
 }
}

function kbKBVis(kbVis){
 for (kbi=0;kbi<document.all.tags('select').length;kbi++) {
  kbobj=document.all.tags('select')[kbi];
   kbobj.style.visibility=kbVis;
 }
}

// Initialise Key Board
if (document.all||document.getElementById){
 kbMakeKeyBoard();
}
else {
 document.write(
 '<style>',
 '.kbLink {position:relative;visibility:hidden; } ',
 '</style>')
}

<!---->
</script>

<script language="JavaScript" type="text/javascript">
<!--
kbTarget='document.Examp1.Ex1.value';
setTimeout('Show1()',500);
cnt=0;

function Show1(){
 kbResetBut();
 kbFullKeyBd();
 kbCC('kbKeyBoard').style.visibility='visible';
 kbCC('kbKeyBoard').style.top=(220)+'px';
 kbCC('kbKeyBoard').style.left=(kbWinC-136)+'px';
 if (cnt<3){ setTimeout('Show2()',1000); }
}

function Show2(){
 kbResetBut();
 kbAry=kbCustomArys[cnt];
 kbCustKeyBd(cnt);
 kbCC('kbKeyBoard').style.visibility='visible';
 kbCC('kbKeyBoard').style.top=(220)+'px';
 kbCC('kbKeyBoard').style.left=(kbWinC-55)+'px';
 cnt++
 if (cnt<3){ setTimeout('Show2()',1500); }
 else {
  setTimeout('Show1()',1500);
 }
}

<!---->
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
The code displays a Floating Key Board for data entry into a form.
<br>The standard Full Key Board or
<br>any number of customised Key Boards produced from customised arrays
<br>can be displayed.
<br>This can be useful to restrict the available input character set.
<br>
<br>Each aplication requiring key board data input must include a link to call to activate the Key Board.
<br>This call specifies the target data field.
<br>
<br>The Link may be activated by onClick or onMouseOver
<br>or the use of the Key Board may be forced by using onKeyPress with the inclusion of return false;
<br>Activating the link will center the Key Board on the link with recognition of the window extremities
<br>Activating the link a second time or clicking the Keyboard 'Enter' or 'Hide' keys will hide the Key Board.
<br>
<br>The Key Board may be moved to new position by clicking the 'Move' key.
<br>There is also a 'Scroll' key to toggle automatic scrolling in the Y axis.
<br>
<br><b>Note</b><br>
<br>All variables, IDs etc are prefixed with 'kb' to minimise conflicts with other JavaScripts.
<br>
<br>The Code is in Two Parts
<br>Part 1 contains the customising code.
<br>Part 2 contains the functional code(14.2K).
<br>Part 2 is best as an external JavaScript.
<br>
<br>
<br><b>Example</b>
<br>
<form name=Examp1>
<table>
  <tr>
    <td width=130 >
      Standard Key Board
    </td>
    <td width=90>
     <input type=text value="Existing Text" size=10 name=Ex1 >
    </td>
    <td width=100>
     <span class=kb onclick=kbShowKB('Examp1','Ex1','F');>KB</span><br>
    </td>
  </tr>
  <tr>
    <td>
     Customised Key Board 0
    </td>
    <td>
      <input type=text size=10 value="123" name=Ex2 >
    </td>
    <td>
    <span class=kb onclick=kbShowKB('Examp1','Ex2',0);>KB</span><br>
    </td>
  </tr>
  <tr>
    <td>
     Customised Key Board 1
    </td>
    <td>
     <input type=text size=10 name=Ex3 >
    </td>
    <td>
      <span class=kb onclick=kbShowKB('Examp1','Ex3',1);>KB</span><br>
    </td>
  </tr>
  <tr>
    <td>
     Forced Use of Key Board 2
    </td>
    <td>
     <input type=text size=10 name=Ex4 onkeypress="javascript:kbShowKB('Examp1','Ex4',2);return false">
    </td>
    <td>
    </td>
  </tr>
</table>

</form>
<br>
<b>kbPart1 Code:-</b>
<br>
<br>
<form name=Code>
<textarea name="Part1" rows="25" cols="90" wrap="off" style=background-color:#F1E0A5;font-size:8pt; >
</textarea>

<br>
<br>
<div id=CopyID></div>
<br>
<input type=button class=IP name=DownLoad id=DownLoad style=cursor:hand;background-color:#D8AF5A;width:150px; value="DownLoad kbPart.js" onclick=window.location='kbPart2.js';>
</form>



<br>
<br>My thanks to <a href="http://www.JS-Examples.com">http://www.JS-Examples.com</a>
<br>for their assistance with the code to hide Select Boxes
<br>and other JavaScript applications.
<br>
<br>
<b><i><br>If you like the Code
<br>Save the Page
<br> and Grab It
</i></b><br>
<br>




</center>
<br>
<br>
<br>
<script language="JavaScript">
<!--
Pt1Code='n<script language="JavaScript" type="text/javascript"> ';
Pt1Code+='n<!-- ';
Pt1Code+='n// Floating KeyBoard InPut kbPart1 (15-02-2004) ';
Pt1Code+='n// by Vic Phillips ';
Pt1Code+='n// http://homepage@ntlworld.com ';
Pt1Code+='n ';
Pt1Code+='n// Notes ';
Pt1Code+='n// Link Call Fields ';
Pt1Code+='n//          Field0   Field1    Field2 ';
Pt1Code+='n// kbShowKB(FormName,InputName,'F'for the Full Key Board or the cell number of kbCustomArys containing the customised array) ';
Pt1Code+='n// Example Form with Links ';
Pt1Code+='n// <form name=Examp1 > ';
Pt1Code+='n// Full KeyBoard  <inputtype=textsize=10name=Ex1>  <span class=kbLinkonclick=kbShowKB('Examp1','Ex1','F');>KB</span><br> ';
Pt1Code+='n// Customised KeyBoard <input type=textsize=10name=Ex1>  <span class=kbLinkonclick=kbShowKB('Examp1','Ex1',0);>KB</span><br> ';
Pt1Code+='n// Forced Keyboard <input type=text size=10 name=Ex4 onkeypress="javascript:kbShowKB('Examp1','Ex4',2);return false"> ';
Pt1Code+='n// </form> ';
Pt1Code+='n ';
Pt1Code+='n// Customise to Requirement ';
Pt1Code+='nvar kbBodyColor='silver'; ';
Pt1Code+='nvar kbKeyColor='#E5E5E5'; ';
Pt1Code+='nvar kbKeyHiColor='white'; ';
Pt1Code+='nvar kbKeyTxtColor='black'; ';
Pt1Code+='nvar kbZIndex=2; ';
Pt1Code+='n ';
Pt1Code+='n// Customised Arrays ';
Pt1Code+='n// Any Name Can be used for the customised array ';
Pt1Code+='nvar CustomAry1=newArray('1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','#'); ';
Pt1Code+='nvar CustomAry2=newArray('1','2','3','4','5','6','7','8','9','0',''); ';
Pt1Code+='nvar CustomAry3=newArray('1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','a','b','c','d','e','f','#'); ';
Pt1Code+='n ';
Pt1Code+='n// Enter the customised array names in cell 0 to .... ';
Pt1Code+='n// To use the array enter the cell number in field 2 of the call ';
Pt1Code+='nvar kbCustomArys=newArray(CustomAry1,CustomAry2,CustomAry3); ';
Pt1Code+='n ';
Pt1Code+='n// The Class for the Key Board Link ';
Pt1Code+='ndocument.write( ';
Pt1Code+='n'<style>', ';
Pt1Code+='n'.kbLink {position:relative;overflow:hidden;width:20px;height:16px;background-color:yellow;text-align:center;font-size:9px;border:solidblack1px;cursor:hand;}', ';
Pt1Code+='n'</style>') ';
Pt1Code+='n ';
Pt1Code+='n<!----> ';
Pt1Code+='n<';
Pt1Code+='/script> ';
Pt1Code+='n';
Pt1Code+='n ';
Pt1Code+='n';
Pt1Code+='n';
Pt1Code+='n';

document.Code.Part1.value=Pt1Code;

function Copy(){
 document.Code.CopyScript.value='kbPart1 Copied to ClipBoard';
 setTimeout('document.Code.CopyScript.value='Copy kbPart1 to ClipBoard'',2000);
 window.clipboardData.setData('Text',document.getElementById('Part1').innerText);
}

 if (window.clipboardData){
  kbCC('CopyID').innerHTML='<input type=button class=IP name=CopyScript id=CopyScript style=cursor:hand;background-color:#D8AF5A;width:150px; value="Copy kbPart1 to ClipBoard" onclick=javascript:Copy();>';
 }
 else {
  kbCC('CopyID').innerHTML='Select All and Copy to Save Scripts';
 }

<!---->
</script>

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *