On-screen HTML/Javascript keyboard

Note: The keyboard layout below is Danish. I have tried to make the code as easy to reverse engineer as possible, for those with some HTML/Javascript experience who would want to make other keyboard layouts. Basically, just keep the IDs in the HTML span elements matching the IDs in the JavaScript functions.

It has been tested successfully with Internet Explorer version 6 through 9, Firefox, Opera and Google Chrome.

To try it, just click the keys with your mouse:



½ 1 2 3 4 5 6 7 8 9 0 + ´ backsp.
tab q w e r t y u i o p å ¨ Enter
C.L. a s d f g h j k l æ ø ' Ent.
sh < z x c v b n m , . - shift
Ctrl Alt Space Alt Gr Ctrl

The source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>JavaScript Keyboard</title>
<script type="text/javascript">
  <!--
  var shiftState = 'lowercase';
  var altGrState = 'off';
  var capsLockState = 'off';

  function keyClick(key)
  {
    shiftToggle('normalKeyClick');
    altGrToggle('normalKeyClick');
    if(key == '&amp;')
    {
      key = '&';
    }
    if(key == '&lt;')
    {
      key = '<';
    }
    if(key == '&gt;')
    {
      key = '>';
    }    
    if(key == 'backsp.')
    {
      var formFieldValue = document.getElementById('echoField').value;
      document.getElementById('echoField').value = formFieldValue.substring(0, formFieldValue.length - 1); // Backspacing over newlines only works in Gecko based browsers
    }
    else
    {
      document.getElementById('echoField').value = document.getElementById('echoField').value + key;
    }
    document.getElementById('echoField').focus();
  }
    
  function shiftToggle(toggleType)
  {
    if((shiftState == 'lowercase') && (toggleType != 'normalKeyClick'))
    {
      document.getElementById('a').innerHTML = 'A';
      document.getElementById('b').innerHTML = 'B';
      document.getElementById('c').innerHTML = 'C';
      document.getElementById('d').innerHTML = 'D';
      document.getElementById('e').innerHTML = 'E';
      document.getElementById('f').innerHTML = 'F';
      document.getElementById('g').innerHTML = 'G';
      document.getElementById('h').innerHTML = 'H';
      document.getElementById('i').innerHTML = 'I';
      document.getElementById('j').innerHTML = 'J';
      document.getElementById('k').innerHTML = 'K';
      document.getElementById('l').innerHTML = 'L';
      document.getElementById('m').innerHTML = 'M';
      document.getElementById('n').innerHTML = 'N';
      document.getElementById('o').innerHTML = 'O';
      document.getElementById('p').innerHTML = 'P';
      document.getElementById('q').innerHTML = 'Q';
      document.getElementById('r').innerHTML = 'R';
      document.getElementById('s').innerHTML = 'S';
      document.getElementById('t').innerHTML = 'T';
      document.getElementById('u').innerHTML = 'U';
      document.getElementById('v').innerHTML = 'V';
      document.getElementById('w').innerHTML = 'W';
      document.getElementById('x').innerHTML = 'X';
      document.getElementById('y').innerHTML = 'Y';
      document.getElementById('z').innerHTML = 'Z';
      document.getElementById('ae').innerHTML = 'Æ';
      document.getElementById('oe').innerHTML = 'Ø';
      document.getElementById('aa').innerHTML = 'Å';
      document.getElementById('oneHalf').innerHTML = '§';
      document.getElementById('n1').innerHTML = '!';
      document.getElementById('n2').innerHTML = '\"';
      document.getElementById('n3').innerHTML = '#';
      document.getElementById('n4').innerHTML = '¤';
      document.getElementById('n5').innerHTML = '%';
      document.getElementById('n6').innerHTML = '&amp;';
      document.getElementById('n7').innerHTML = '\/';
      document.getElementById('n8').innerHTML = '(';
      document.getElementById('n9').innerHTML = ')';
      document.getElementById('n0').innerHTML = '=';
      document.getElementById('plus').innerHTML = '?';
      document.getElementById('forwardSingleQuote').innerHTML = '`';
      document.getElementById('lessThan').innerHTML = '&gt;';
      document.getElementById('comma').innerHTML = '\;';
      document.getElementById('dot').innerHTML = ':';
      document.getElementById('dash').innerHTML = '_';
      document.getElementById('singleQuote').innerHTML = '*';
      document.getElementById('umlaut').innerHTML = '^';
      shiftState = 'uppercase';
    }
    else if (shiftState == 'uppercase')
    {
      if(capsLockState == 'off')
      {
        document.getElementById('a').innerHTML = 'a';
        document.getElementById('b').innerHTML = 'b';
        document.getElementById('c').innerHTML = 'c';
        document.getElementById('d').innerHTML = 'd';
        document.getElementById('e').innerHTML = 'e';
        document.getElementById('f').innerHTML = 'f';
        document.getElementById('g').innerHTML = 'g';
        document.getElementById('h').innerHTML = 'h';
        document.getElementById('i').innerHTML = 'i';
        document.getElementById('j').innerHTML = 'j';
        document.getElementById('k').innerHTML = 'k';
        document.getElementById('l').innerHTML = 'l';
        document.getElementById('m').innerHTML = 'm';
        document.getElementById('n').innerHTML = 'n';
        document.getElementById('o').innerHTML = 'o';
        document.getElementById('p').innerHTML = 'p';
        document.getElementById('q').innerHTML = 'q';
        document.getElementById('r').innerHTML = 'r';
        document.getElementById('s').innerHTML = 's';
        document.getElementById('t').innerHTML = 't';
        document.getElementById('u').innerHTML = 'u';
        document.getElementById('v').innerHTML = 'v';
        document.getElementById('w').innerHTML = 'w';
        document.getElementById('x').innerHTML = 'x';
        document.getElementById('y').innerHTML = 'y';
        document.getElementById('z').innerHTML = 'z';
        document.getElementById('ae').innerHTML = 'æ';
        document.getElementById('oe').innerHTML = 'ø';
        document.getElementById('aa').innerHTML = 'å';
        document.getElementById('oneHalf').innerHTML = '½';
        document.getElementById('n1').innerHTML = '1';
        document.getElementById('n2').innerHTML = '2';
        document.getElementById('n3').innerHTML = '3';
        document.getElementById('n4').innerHTML = '4';
        document.getElementById('n5').innerHTML = '5';
        document.getElementById('n6').innerHTML = '6';
        document.getElementById('n7').innerHTML = '7';
        document.getElementById('n8').innerHTML = '8';
        document.getElementById('n9').innerHTML = '9';
        document.getElementById('n0').innerHTML = '0';
        document.getElementById('plus').innerHTML = '+';
        document.getElementById('forwardSingleQuote').innerHTML = '´';
        document.getElementById('lessThan').innerHTML = '&lt;';
        document.getElementById('comma').innerHTML = ',';
        document.getElementById('dot').innerHTML = '.';
        document.getElementById('dash').innerHTML = '-';
        document.getElementById('singleQuote').innerHTML = '\'';
        document.getElementById('umlaut').innerHTML = '¨';
        shiftState = 'lowercase';
      }
    }
  }

  function altGrToggle(toggleType)
  {
    if((altGrState == 'off') && (toggleType != 'normalKeyClick'))
    {
      document.getElementById('n2').innerHTML = '@';
      document.getElementById('n3').innerHTML = '£';
      document.getElementById('e').innerHTML = '€';
      document.getElementById('n4').innerHTML = '$';
      document.getElementById('n7').innerHTML = '{';
      document.getElementById('n8').innerHTML = '[';
      document.getElementById('n9').innerHTML = ']';
      document.getElementById('n0').innerHTML = '}';
      document.getElementById('forwardSingleQuote').innerHTML = '|';
      document.getElementById('umlaut').innerHTML = '~';
      document.getElementById('lessThan').innerHTML = '\\';
      altGrState = 'on';
    }
    else if (altGrState == 'on')
    {
      document.getElementById('n2').innerHTML = '2';
      document.getElementById('n3').innerHTML = '3';
      document.getElementById('e').innerHTML = 'e';
      document.getElementById('n4').innerHTML = '4';
      document.getElementById('n7').innerHTML = '7';
      document.getElementById('n8').innerHTML = '8';
      document.getElementById('n9').innerHTML = '9';
      document.getElementById('n0').innerHTML = '0';
      document.getElementById('forwardSingleQuote').innerHTML = '´';
      document.getElementById('umlaut').innerHTML = '¨';
      document.getElementById('lessThan').innerHTML = '&lt;';
      altGrState = 'off';
    }
  }

  function toggleCapsLock()
  {
    if(capsLockState == 'off')
    {
      capsLockState = 'on';
      shiftToggle('capsLock')
    }
    else
    {
      capsLockState = 'off';
      shiftToggle('capsLock');
    }
  }
  -->
</script>
<style type="text/css">
  span.key  { font-family: monospace;
              font-size: 14px;
              cursor: pointer;
              border-collapse: collapse;
              border: 1px solid #000000;
              padding-left: 5px;
              padding-right: 5px;
              padding-top: 2px;
              padding-bottom: 2px;
              background-color: #FFFFFF;
              }
  #keyboard { font-family: monospace;
              line-height: 230%;
              border-collapse: collapse;
              border: 2px solid #000000;
              padding: 4px;
              width: 460px;
              background-color: #CFCFCF;
              }
  #shift2   { padding-right: 40px;
              }
  #Space    { padding-right: 85px;
              padding-left: 85px;
              }
</style>
</head>
<body>
<textarea id="echoField" rows="7" cols="60" style="width: 460px; height: 100px; font-family: Verdana, Arial, Helvetica, Geneva, Sans-Serif; font-size: 12px;" ></textarea>
<br /><br />
  <div id="keyboard">
    <span class="key" id="oneHalf" onclick="keyClick(this.innerHTML)"     onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">½</span>
    <span class="key" id="n1" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">1</span>
    <span class="key" id="n2" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">2</span>
    <span class="key" id="n3" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">3</span>
    <span class="key" id="n4" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">4</span>
    <span class="key" id="n5" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">5</span>
    <span class="key" id="n6" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">6</span>
    <span class="key" id="n7" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">7</span>
    <span class="key" id="n8" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">8</span>
    <span class="key" id="n9" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">9</span>
    <span class="key" id="n0" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">0</span>
    <span class="key" id="plus" onclick="keyClick(this.innerHTML)"        onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">+</span>
    <span class="key" id="forwardSingleQuote" onclick="keyClick(this.innerHTML)" onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">´</span>
    <span class="key" id="backsp" onclick="keyClick(this.innerHTML)"      onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">backsp.</span><br />

    <span class="key" id="tab" onclick="keyClick('\t')"                   onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">tab</span>
    <span class="key" id="q" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">q</span>
    <span class="key" id="w" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">w</span>
    <span class="key" id="e" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">e</span>
    <span class="key" id="r" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">r</span>
    <span class="key" id="t" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">t</span>
    <span class="key" id="y" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">y</span>
    <span class="key" id="u" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">u</span>
    <span class="key" id="i" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">i</span>
    <span class="key" id="o" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">o</span>
    <span class="key" id="p" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">p</span>
    <span class="key" id="aa" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">å</span>
    <span class="key" id="umlaut" onclick="keyClick(this.innerHTML)"      onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">¨</span>
    <span class="key" id="Enter1" onclick="keyClick('\n')"                onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Enter</span><br />

    <span class="key" id="capsLock" onclick="toggleCapsLock()"            onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">C.L.</span>
    <span class="key" id="a" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">a</span>
    <span class="key" id="s" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">s</span>
    <span class="key" id="d" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">d</span>
    <span class="key" id="f" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">f</span>
    <span class="key" id="g" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">g</span>
    <span class="key" id="h" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">h</span>
    <span class="key" id="j" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">j</span>
    <span class="key" id="k" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">k</span>
    <span class="key" id="l" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">l</span>
    <span class="key" id="ae" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">æ</span>
    <span class="key" id="oe" onclick="keyClick(this.innerHTML)"          onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">ø</span>
    <span class="key" id="singleQuote" onclick="keyClick(this.innerHTML)" onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">'</span>
    <span class="key" id="Enter2" onclick="keyClick('\n')"                onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Ent.</span><br />

    <span class="key" id="shift1" onclick="shiftToggle()"                 onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">sh</span>
    <span class="key" id="lessThan" onclick="keyClick(this.innerHTML)"    onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">&lt;</span>
    <span class="key" id="z" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">z</span>
    <span class="key" id="x" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">x</span>
    <span class="key" id="c" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">c</span>
    <span class="key" id="v" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">v</span>
    <span class="key" id="b" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">b</span>
    <span class="key" id="n" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">n</span>
    <span class="key" id="m" onclick="keyClick(this.innerHTML)"           onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">m</span>
    <span class="key" id="comma" onclick="keyClick(this.innerHTML)"       onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">,</span>
    <span class="key" id="dot" onclick="keyClick(this.innerHTML)"         onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">.</span>
    <span class="key" id="dash" onclick="keyClick(this.innerHTML)"        onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">-</span>
    <span class="key" id="shift2" onclick="shiftToggle()"                 onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">shift</span><br />

    <span class="key" id="Ctrl1" onclick="keyClick('')"                   onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Ctrl</span>
    <span class="key" id="Alt" onclick="keyClick('')"                     onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Alt</span>
    <span class="key" id="Space" onclick="keyClick(' ')"                  onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Space</span>
    <span class="key" id="AltGr" onclick="altGrToggle()"                  onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Alt Gr</span>
    <span class="key" id="Ctrl2" onclick="keyClick('')"                   onmousedown="this.style.backgroundColor='#6187CE'" onmouseup="this.style.backgroundColor='#FFFFFF'">Ctrl</span>
  </div>
</body>
</html>
Page last updated 2010-11-07 11:04. Some rights reserved (CC by 3.0)