« »

Creating a keyboard on your webpages.

Label: Real User Keyboard

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=JavaScript>
Chars=new Array(); 
Chars[0]="Â°^!1"+'"'+"2Â§3$4%5&6/7(8)9=0?Ã�`Â´QqWwEeRrTtZzUuIiOoPpÃ�Ã¼*+'#AaSsDdFfGgHhJjKkLlÃ�Ã¶Ã�Ã¤YyXxCcVvBbNnMm;,:._- ";
Chars[1]="Â°^!1"+'"'+"2Â§3$4%5&6/7(8)9=0?Ã�`Â´QqWwEeRrTtZzUuIiOoPpÃ�Ã¼*+'#AaSsDdFfGgHhJjKkLlÃ�Ã¶Ã�Ã¤YyXxCcVvBbNnMm;,:._- ";

//When you want to add a keyboard of your language then change the string Chars[1] so that it fits to your keyboard!

var CurChars;
function SetKB(nn)
{ var ii, ll=document.KB.length;
  for (ii=0; ii<ll; ii++)
  { document.KB[ii].value=Chars[nn].charAt(ii);
  }
  CurChars=Chars[nn];
  if (nn==1) alert("You must save this script to your"+
               "\r\ncomputer and then edit this file."+
               "\r\nIn the source code there is explained"+
               "\r\nwhat you must do to adapt this script"+
               "\r\nto your keyboard layout."+
               "\r\nIn the meantime try to write with the"+
               "\r\ngerman keyboard layout.");
}
function KBKeyUp()
{ var ii, ss="", ll=document.KB.length;
  for (ii=0; ii<ll; ii++) ss+=document.KB[ii].value;
  ss+=" ";
  if (CurChars.length==ss.length) CurChars=ss;
}
var clickedIdx=-1;
function KBClick()
{ var nn=-1;
  for (ii=0; ii<ll; ii++) 
  { if (document.KB[ii].value==this.value) nn=ii;
  }
  if (nn<0) return;
  if (clickedIdx<0)
  { clickedIdx=nn;
    return;
  }
  var tt=this.value;
  this.value=document.KB[clickedIdx].value;
  document.KB[clickedIdx].value=tt;
  clickedIdx=-1;
  KBKeyUp();
}
var ii, ll;
ll=document.KB.length;
for (ii=0; ii<ll; ii++) document.KB[ii].onkeyup=KBKeyUp;
for (ii=0; ii<ll; ii++) document.KB[ii].onclick=KBClick;
SetKB(0);
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<FORM>Real User Keyboard: <SELECT onchange=SetKB(this.selectedIndex)> <OPTION 
  selected>Keyboard 1 (german)<OPTION>Add your Keyboard here!</OPTION></SELECT></FORM>
<FORM name=KB>
<TABLE bgColor=white border=2 cellPadding=2 cellSpacing=0>
  <TBODY>
  <TR>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>

    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>

    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=5>Back<BR>Space</TD></TR>
  <TR>
    <TD colSpan=4>Tab</TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>

    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>

    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD>&nbsp;</TD></TR>
  <TR>
    <TD colSpan=5>Caps&nbsp;Lock</TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>

    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=6>Enter</TD></TR>

  <TR>
    <TD colSpan=6>Shift</TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>

    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=3><INPUT><BR><INPUT></TD>
    <TD colSpan=8>Shift</TD></TR>
  <TR>
    <TD colSpan=4>Ctrl</TD>
    <TD colSpan=4>&nbsp;</TD>

    <TD colSpan=3>Alt</TD>
    <TD colSpan=23>&nbsp;<BR><BR></TD>
    <TD colSpan=4>Alt</TD>
    <TD colSpan=3>&nbsp;</TD>
    <TD colSpan=3>Ctrl</TD></TR></TBODY></TABLE></FORM>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->