Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <h1>KEYCODE一覧</h1>
文字を入力してどのKeyが打ち込まれたか判定します。
<div id="keytype">
CODE
</div>
<input type="text" placeholder="入力してください" />

<table class="tmTable tmMargL15px" style="height: 598px;" width="662">
<tbody>
<tr class="key">
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="keycode">
<td class="48">48</td>
<td class="49">49</td>
<td class="50">50</td>
<td class="51">51</td>
<td class="52">52</td>
</tr>
<tr class="key">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="keycode">
<td class="53">53</td>
<td class="54">54</td>
<td class="55">55</td>
<td class="56">56</td>
<td class="57">57</td>
</tr>
<tr class="key">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr class="keycode">
<td class="65">65</td>
<td class="66">66</td>
<td class="67">67</td>
<td class="68">68</td>
<td class="69">69</td>
</tr>
<tr class="key">
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr class="keycode">
<td class="70">70</td>
<td class="71">71</td>
<td class="72">72</td>
<td class="73">73</td>
<td class="74">74</td>
</tr>
<tr class="key">
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr class="keycode">
<td class="75">75</td>
<td class="76">76</td>
<td class="77">77</td>
<td class="78">78</td>
<td class="79">79</td>
</tr>
<tr class="key">
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr class="keycode">
<td class="80">80</td>
<td class="81">81</td>
<td class="82">82</td>
<td class="83">83</td>
<td class="84">84</td>
</tr>
<tr class="key">
<td>U</td>
<td>V</td>
<td>W</td>
<td>X</td>
<td>Y</td>
</tr>
<tr class="keycode">
<td class="85">85</td>
<td class="86">86</td>
<td class="87">87</td>
<td class="88">88</td>
<td class="89">89</td>
</tr>
<tr class="key">
<td>Z</td>
</tr>
<tr class="keycode">
<td class="90">90</td>
</tr>
</tbody>
</table>
</div>
<div class="m-tbl">
<table class="tmTable tmMargL15px">
<tbody>
<tr class="key">
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
</tr>
<tr class="keycode">
<td class="F1">112</td>
<td class="F2">113</td>
<td class="F3">114</td>
<td class="F4">115</td>
<td class="F5">116</td>
</tr>
<tr class="key">
<td>F6</td>
<td>F7</td>
<td>F8</td>
<td>F9</td>
<td>F10</td>
</tr>
<tr class="keycode">
<td class="F6">117</td>
<td class="F7">118</td>
<td class="F8">119</td>
<td class="F9">120</td>
<td class="F10">121</td>
</tr>
<tr class="key">
<td>F11</td>
<td>F12</td>
</tr>
<tr class="keycode">
<td class="F11">122</td>
<td class="F12">123</td>
</tr>
</tbody>
</table>
</div>
<div class="m-tbl">
<table class="tmTable tmMargL15px">
<tbody>
<tr class="key">
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="keycode">
<td class="0">96</td>
<td class="1">97</td>
<td class="2">98</td>
<td class="3">99</td>
<td class="4">100</td>
</tr>
<tr class="key">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="keycode">
<td class="5">101</td>
<td class="6">102</td>
<td class="7">103</td>
<td class="8">104</td>
<td class="9">105</td>
</tr>
<tr class="key">
<td>*</td>
<td>+</td>
<td>-</td>
<td>.</td>
<td>/</td>
</tr>
<tr class="keycode">
<td class="k106">106</td>
<td class="k107">107</td>
<td class="k109">109</td>
<td class="110">110</td>
<td class="k111">111</td>
</tr>
</tbody>
</table>
</div>
<div class="m-tbl">
<table class="tmTable tmMargL15px">
<tbody>
<tr class="key">
<td>BackSpace</td>
<td>Tab</td>
<td>Enter</td>
<td>Shift</td>
<td>Ctrl</td>
</tr>
<tr class="keycode">
<td class="BackSpace">8</td>
<td class="Tab">9</td>
<td class="Enter">13</td>
<td class="Shift">16</td>
<td class="Ctrl">17</td>
</tr>
<tr class="key">
<td>Alt</td>
<td>PauseBreak</td>
<td>CapsLock</td>
<td>Esc</td>
<td>Space</td>
</tr>
<tr class="keycode">
<td class="Alt">18</td>
<td class="PauseBreak">19</td>
<td class="CapsLock">20</td>
<td class="Esc">27</td>
<td class="Space">32</td>
</tr>
<tr class="key">
<td>PageUp</td>
<td>PageDown</td>
<td>End</td>
<td>Home</td>
<td>←</td>
</tr>
<tr class="keycode">
<td class="PageUp">33</td>
<td class="PageDown">34</td>
<td class="End">35</td>
<td class="Home">36</td>
<td class="k37">37</td>
</tr>
<tr class="key">
<td>↑</td>
<td>→</td>
<td>↓</td>
<td>Insert</td>
<td>Delete</td>
</tr>
<tr class="keycode">
<td class="k38">38</td>
<td class="k39">39</td>
<td class="k40">40</td>
<td class="k45">45</td>
<td class="k46">46</td>
</tr>
<tr class="key">
<td>NumLock</td>
<td>ScrollLock</td>
<td>*:</td>
<td>+;</td>
<td>&lt;,</td>
</tr>
<tr class="keycode">
<td class="NumLock">144</td>
<td class="ScrollLock">145</td>
<td class="k186">186</td>
<td class="k187">187</td>
<td class="k188">188</td>
</tr>
<tr class="key">
<td>=-</td>
<td>&gt;.</td>
<td>?/</td>
<td>`@</td>
<td>{[</td>
</tr>
<tr class="keycode">
<td class="k189">189</td>
<td class="k190">190</td>
<td class="k191">191</td>
<td class="k192">192</td>
<td class="k219">219</td>
</tr>
<tr class="key">
<td>|\</td>
<td>}]</td>
<td>~^</td>
<td>_\</td>
</tr>
<tr class="keycode">
<td class="k220">220</td>
<td class="k221">221</td>
<td class="k222">222</td>
<td class="k226">226</td>
</tr>
</tbody>
</table>
              
            
!

CSS

              
                #keytype{
  width: 100px;
  height: 80px;
  background: skyblue;
  border-radius: 50%;
  color: black;
  font-size: 50px;
  margin:20px;
  padding-left:20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 0px;
}
input{
  width:200px;
  height:40px;
  font-size:20px;
}

              
            
!

JS

              
                $(window).keydown(function (e) {
  if (e.keyCode === 48) {
     $("#keytype").text("0");     $("#keytype").css("background","purple");
$(".48").css("background","purple");
$(".48").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 48){
$("#keytype").text("0");
$("#keytype").css("background","purple");
$(".48").css("background","purple");
$(".48").css("color","#FFF");
}
});

$(window).keyup(function (e) {if (e.keyCode === 49) {
$("#keytype").text("1");
$("#keytype").css("background","darkred");
$(".49").css("background","darkred");
$(".49").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 50) {
$("#keytype").text("2");
$("#keytype").css("background","saddlebrown");
$(".50").css("background","saddlebrown");
$(".50").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 51) {
$("#keytype").text("3");
$("#keytype").css("background","chocolate");
$(".51").css("background","chocolate");
$(".51").css("color","#FFF");
}
});


$(window).keydown(function (e) {if (e.keyCode === 52) {
$("#keytype").text("4");
$("#keytype").css("background","olive");
$(".52").css("background","olive");
$(".52").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 53) {
$("#keytype").text("5");
$("#keytype").css("background","darkolivegreen");
$(".53").css("background","darkolivegreen");
$(".53").css("color","#FFF");
}
});


$(window).keydown(function (e) {if (e.keyCode === 54) {
$("#keytype").text("6");
$("#keytype").css("background","green");
$(".54").css("background","green");
$(".54").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 55) {
$("#keytype").text("7");
$("#keytype").css("background","navy");
$(".55").css("background","navy");
$(".55").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 56) {
$("#keytype").text("8");
$("#keytype").css("background","darkslateblue");
$(".56").css("background","darkslateblue");
$(".56").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 57) {
$("#keytype").text("9");
$("#keytype").css("background","black");
$(".57").css("background","black");
$(".57").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 65) {
$("#keytype").text("A");
$("#keytype").css("background","#07EEF7");
$(".65").css("background","#07EEF7");
$(".65").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 66) {
$("#keytype").text("B");
$("#keytype").css("background","indianred");
$(".66").css("background","indianred");
$(".66").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 67) {
$("#keytype").text("C");
$("#keytype").css("background","peru");
$(".67").css("background","peru");
$(".67").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 68) {
$("#keytype").text("D");
$("#keytype").css("background","seagreen");
$(".68").css("background","seagreen");
$(".68").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 69) {
$("#keytype").text("E");
$("#keytype").css("background","darkseagreen");
$(".69").css("background","darkseagreen");
$(".69").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 70) {
$("#keytype").text("F");
$("#keytype").css("background","darkcyan");
$(".70").css("background","darkcyan");
$(".70").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 71) {
$("#keytype").text("G");
$("#keytype").css("background","gray");
$(".71").css("background","gray");
$(".71").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 72) {
$("#keytype").text("H");
$("#keytype").css("background","red");
$(".72").css("background","red");
$(".72").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 73) {
$("#keytype").text("I");
$("#keytype").css("background","blueviolet");
$(".73").css("background","blueviolet");
$(".73").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 74) {
$("#keytype").text("J");
$("#keytype").css("background","darkorchid");
$(".74").css("background","darkorchid");
$(".74").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 75) {
$("#keytype").text("K");
$("#keytype").css("background","fuchsia");
$(".75").css("background","fuchsia");
$(".75").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 76) {
$("#keytype").text("L");
$("#keytype").css("background","orchid");
$(".76").css("background","orchid");
$(".76").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 77) {
$("#keytype").text("M");
$("#keytype").css("background","palevioletred");
$(".77").css("background","palevioletred");
$(".77").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 78) {
$("#keytype").text("N");
$("#keytype").css("background","deeppink");
$(".78").css("background","deeppink");
$(".78").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 79) {
$("#keytype").text("O");
$("#keytype").css("background","orangered");
$(".79").css("background","orangered");
$(".79").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 80) {
$("#keytype").text("P");
$("#keytype").css("background","salmon");
$(".80").css("background","salmon");
$(".80").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 81) {
$("#keytype").text("Q");
$("#keytype").css("background","darksalmon");
$(".81").css("background","DarkSalmon");
$(".81").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 82) {
$("#keytype").text("R");
$("#keytype").css("background","tan");
$(".82").css("background","tan");
$(".82").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 83) {
$("#keytype").text("S");
$("#keytype").css("background","goldenrod");
$(".83").css("background","goldenrod");
$(".83").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 84) {
$("#keytype").text("T");
$("#keytype").css("background","orange");
$(".84").css("background","orange");
$(".84").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 85) {
$("#keytype").text("U");
$("#keytype").css("background","yellow");
$(".85").css("background","yellow");
$(".85").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 86) {
$("#keytype").text("V");
$("#keytype").css("background","chartreuse");
$(".86").css("background","chartreuse");
$(".86").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 87) {
$("#keytype").text("W");
$("#keytype").css("background","yellowgreen");
$(".87").css("background","yellowgreen");
$(".87").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 88) {
$("#keytype").text("X");
$("#keytype").css("background","lime");
$(".88").css("background","lime");
$(".88").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 89) {
$("#keytype").text("Y");
$("#keytype").css("background","#A1E01C");
$(".89").css("background","#A1E01C");
$(".89").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 90) {
$("#keytype").text("Z");
$("#keytype").css("background","darkturquoise");
$(".90").css("background","darkturquoise");
$(".90").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 112) {
$("#keytype").text("F1");
$("#keytype").css("background","turquoise");
$(".F1").css("background","turquoise");
$(".F1").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 113) {
$("#keytype").text("F2");
$("#keytype").css("background","cyan");
$(".F2").css("background","cyan");
$(".F2").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 114) {
$("#keytype").text("F3");
$("#keytype").css("background","cornflowerblue");
$(".F3").css("background","cornflowerblue");
$(".F3").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 115) {
$("#keytype").text("F4");
$("#keytype").css("background","mediumslateblu");
$(".F4").css("background","mediumslateblu");
$(".F4").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 116) {
$("#keytype").text("F5");
$("#keytype").css("background","slateblue");
$(".F5").css("background","slateblue");
$(".F5").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 117) {
$("#keytype").text("F6");
$("#keytype").css("background","lightslategray");
$(".F6").css("background","lightslategray");
$(".F6").css("co","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 118) {
$("#keytype").text("F7");
$("#keytype").css("background","silver");
$(".F7").css("background","silver");
$(".F7").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 119) {
$("#keytype").text("F8");
$("#keytype").css("background","thistle");
$(".F8").css("background","thistle");
$(".F8").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 120) {
$("#keytype").text("F9");
$("#keytype").css("background","pink");
$(".F9").css("background","pink");
$(".F9").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 121) {
$("#keytype").text("F10");
$("#keytype").css("background","peachpuff");
$(".F10").css("background","peachpuff");
$(".F10").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 122) {
$("#keytype").text("F11");
$("#keytype").css("background","moccasin");
$(".F11").css("background","moccasin");
$(".F11").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 123) {
$("#keytype").text("F12");
$("#keytype").css("background","khaki");
$(".F12").css("background","khaki");
$(".F12").css("color","#FFF");
}
});


$(window).keydown(function (e) {if (e.keyCode === 96) {
$("#keytype").text("0");
$("#keytype").css("background","palegreen");
$(".0").css("background","palegreen");
$(".0").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 97) {
$("#keytype").text("1");
$("#keytype").css("background","paleturquoise");
$(".1").css("background","paleturquoise");
$(".1").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 98) {
$("#keytype").text("2");
$("#keytype").css("background","lightskyblue");
$(".2").css("background","lightskyblue");
$(".2").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 99) {
$("#keytype").text("3");
$("#keytype").css("background","lightsteelblue");
$(".3").css("background","lightsteelblue");
$(".3").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 100) {
$("#keytype").text("4");
$("#keytype").css("background","gainsboro");
$(".4").css("background","gainsboro");
$(".4").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 101) {
$("#keytype").text("5");
$("#keytype").css("background","lavenderblush");
$(".5").css("background","lavenderblush");
$(".5").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 102) {
$("#keytype").text("6");
$("#keytype").css("background","antiquewhite");
$(".6").css("background","antiquewhite");
$(".6").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 103) {
$("#keytype").text("7");
$("#keytype").css("background","lavendar");
$(".7").css("background","lavendar");
$(".7").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 104) {
$("#keytype").text("8");
$("#keytype").css("background","oldlace");
$(".8").css("background","oldlace");
$(".8").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 105) {
$("#keytype").text("9");
$("#keytype").css("background","lightblue");
$(".9").css("background","lightblue");
$(".9").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 106) {
$("#keytype").text("*");
$("#keytype").css("background","bisque");
$(".k106").css("background","bisque");
$(".k106").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 107) {
$("#keytype").text("+");
$("#keytype").css("background","deepskyblue");
$(".k107").css("background","deepskyblue");
$(".k107").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 109) {
$("#keytype").text("-");
$("#keytype").css("background","red");
$(".k109").css("background","");
$(".k109").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 110) {
$("#keytype").text(".");
$("#keytype").css("background","lightseagreen");
$(".k110").css("background","lightseagreen");
$(".k110").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 111) {
$("#keytype").text("/");
$("#keytype").css("background","limegreen");
$(".k111").css("background","limegreen");
$(".k111").css("color","#FFF");
}
});


$(window).keydown(function (e) {if (e.keyCode === 8) {
$("#keytype").text("BackSpace");
$("#keytype").css("background","lightcoral");
$(".BackSpace").css("background","lightcoral");
$(".BackSpace").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 9) {
$("#keytype").text("Tab");
$("#keytype").css("background","tomato");
$(".Tab").css("background","tomato");
$(".Tab").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 13) {
$("#keytype").text("Enter");
$("#keytype").css("background","magenta");
$(".Enter").css("background","magenta");
$(".Enter").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 16) {
$("#keytype").text("Shift");
$("#keytype").css("background","forestgreen");
$(".Shift").css("background","forestgreen");
$(".Shift").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 17) {
$("#keytype").text("Ctrl");
$("#keytype").css("background","cadetblue");
$(".Ctrl").css("background","cadetblue");
$(".Ctrl").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 18) {
$("#keytype").text("Alt");
$("#keytype").css("background","dimgray");
$(".Alt").css("background","dimgray");
$(".Alt").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 19) {
$("#keytype").text("PauseBreak");
$("#keytype").css("background","indigo");
$(".PauseBreak").css("background","indigo");
$(".PauseBreak").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 20) {
$("#keytype").text("CapsLock");
$("#keytype").css("background","DarkSalmon");
$(".CapsLock").css("background","DarkSalmon");
$(".CapsLock").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 27) {
$("#keytype").text("Esc");
$("#keytype").css("background","MintCream");
$(".Esc").css("background","MintCream");
$(".Esc").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 32) {
$("#keytype").text("Space");
$("#keytype").css("background","Beige");
$(".Space").css("background","Beige");
$(".Space").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 33) {
$("#keytype").text("PageUp");
$("#keytype").css("background","LightPink");
$(".PageUp").css("background","LightPink");
$(".PageUp").css("color","#FFF");
}});

$(window).keydown(function (e) {if (e.keyCode === 34) {
$("#keytype").text("PageDown");
$("#keytype").css("background","Green");
$(".PageDown").css("background","Green");
$(".PageDown").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 35) {
$("#keytype").text("End");
$("#keytype").css("background","MediumAquamarine");
$(".End").css("background","MediumAquamarine");
$(".End").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 36) {
$("#keytype").text("Home");
$("#keytype").css("background","LightSlateGray");
$(".Home").css("background","LightSlateGray");
$(".Home").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 37) {
$("#keytype").text("←");
$("#keytype").css("background","PaleGreen");
$(".k37").css("background","PaleGreen");
$(".k37").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 38) {
$("#keytype").text("↑");
$("#keytype").css("background","LightGrey");
$(".k38").css("background","LightGrey");
$(".k38").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 39) {
$("#keytype").text("→");
$("#keytype").css("background","OliveDrab");
$(".k39").css("background","OliveDrab");
$(".k39").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 40) {
$("#keytype").text("↓");
$("#keytype").css("background","RosyBrown");
$(".k40").css("background","RosyBrown");
$(".k40").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 45) {
$("#keytype").text("Insert");
$("#keytype").css("background","YellowGreen");
$(".Insert").css("background","YellowGreen");
$(".Insert").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 46) {
$("#keytype").text("Delete");
$("#keytype").css("background","LightSteelBlue");
$(".Delete").css("background","LightSteelBlue");
$(".Delete").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 144) {
$("#keytype").text("NumLock");
$("#keytype").css("background","SlateBlue");
$(".NumLock").css("background","SlateBlue");
$(".NumLock").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 145) {
$("#keytype").text("ScrollLock");
$("#keytype").css("background","red");
$(".ScrollLock").css("background","red");
$(".ScrollLock").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 186) {
$("#keytype").text("*:");
$("#keytype").css("background","Khaki");
$(".k186").css("background","Khaki");
$(".k186").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 187) {
$("#keytype").text("+;");
$("#keytype").css("background","red");
$(".k187").css("background","red");
$(".k187").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 188) {
$("#keytype").text("<,");
$("#keytype").css("background","OrangeRed");
$(".Enter").css("background","OrangeRed");
$(".k188").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 189) {
$("#keytype").text("=-");
$("#keytype").css("background","red");
$(".k189").css("background","red");
$(".k189").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 190) {
$("#keytype").text(">.");
$("#keytype").css("background","SeaGreen");
$(".k190").css("background","SeaGreen");
$(".k190").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 191) {
$("#keytype").text("?/");
$("#keytype").css("background","red");
$(".k191").css("background","magenta");
$(".k191").css("color","#FFF");
}
});

$(window).keydown(function (e) {if (e.keyCode === 192) {
$("#keytype").text("@`");
$("#keytype").css("background","OldLace");
$(".k192").css("background","magenta");
$(".K192").css("color","#FFF");
}
});


              
            
!
999px

Console