HTML代码
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span><span class="on">{
</span></li>
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">"</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span class="on"><</span></li>
<li class="symbol"><span class="off">.</span><span class="on">></span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem"> </li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="keyboard.js"></script>
</body>
jQuery代码
/*
* jQuery JavaScript Library v1.3.2
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*
* Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
* Revision: 6246
*/
(function(){
var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){
return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={
init:function(E,H){
E=E||document;if(E.nodeType){
this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string"){
var G=D.exec(E);if(G&&(G[1]||!H)){
if(G[1]){
E=o.clean([G[1]],H)}else{
var I=document.getElementById(G[3]);if(I&&I.id!=G[3]){
return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else{
return o(H).find(E)}}else{
if(o.isFunction(E)){
return o(document).ready(E)}}if(E.selector&&E.context){
this.selector=E.selector;this.context=E.context}return this.setArray(o.isArray(E)?E:o.makeArray(E))},selector:"",jquery:"1.3.2",size:function(){
return this.length},get:function(E){
return E===g?Array.prototype.slice.call(this):this[E]},pushStack:function(F,H,E){
var G=o(F);G.prevObject=this;G.context=this.context;if(H==="find"){
G.selector=this.selector+(this.selector?" ":"")+E}else{
if(H){
G.selector=this.selector+"."+H+"("+E+")"}}return G},setArray:function(E){
this.length=0;Array.prototype.push.apply(this,E);return this},each:function(F,E){
return o.each(this,F,E)},index:function(E){
return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){
var E=F;if(typeof F==="string"){
if(H===g){
return this[0]&&o[G||"attr"](this[0],F)}else{
E={
};E[F]=H}}return this.each(function(I){
for(F in E){
o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){
if((E=="width"||E=="height")&&parseFloat(F)<0){
F=g}return this.attr(E,F,"curCSS")},text:function(F){
if(typeof F!=="object"&&F!=null){
return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){
o.each(this.childNodes,function(){
if(this.nodeType!=8){
E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){
if(this[0]){
var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode){
F.insertBefore(this[0])}F.map(function(){
var G=this;while(G.firstChild){
G=G.firstChild}return G}).append(this)}return this},wrapInner:function(E){
return this.each(function(){
o(this).contents().wrapAll(E)})},wrap:function(E){
return this.each(function(){
o(this).wrapAll(E)})},append:function(){
return this.domManip(arguments,true,function(E){
if(this.nodeType==1){
this.appendChild(E)}})},prepend:function(){
return this.domManip(arguments,true,function(E){
if(this.nodeType==1){
this.insertBefore(E,this.firstChild)}})},before:function(){
return this.domManip(arguments,false,function(E){
this.parentNode.insertBefore(E,this)})},after:function(){
return this.domManip(arguments,false,function(E){
this.parentNode.insertBefore(E,this.nextSibling)})},end:function(){
return this.prevObject||o([])},push:[].push,sort:[].sort,splice:[].splice,find:function(E){
if(this.length===1){
var F=this.pushStack([],"find",E);F.length=0;o.find(E,this[0],F);return F}else{
return this.pushStack(o.unique(o.map(this,function(G){
return o.find(E,G)})),"find",E)}},clone:function(G){
var E=this.map(function(){
if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){
var I=this.outerHTML;if(!I){
var J=this.ownerDocument.createElement("div");J.appendChild(this.cloneNode(true));I=J.innerHTML}return o.clean([I.replace(/ jQuery\d+="(?:\d+|null)"/g,"").replace(/^\s*/,"")])[0]}else{
return this.cloneNode(true)}});if(G===true){
var H=this.find("*").andSelf(),F=0;E.find("*").andSelf().each(function(){
if(this.nodeName!==H[F].nodeName){
return}var I=o.data(H[F],"events");for(var K in I){
for(var J in I[K]){
o.event.add(this,K,I[K][J],I[K][J].data)}}F++})}return E},filter:function(E){
return this.pushStack(o.isFunction(E)&&o.grep(this,function(G,F){
return E.call(G,F)})||o.multiFilter(E,o.grep(this,function(F){
return F.nodeType===1})),"filter",E)},closest:function(E){
var G=o.expr.match.POS.test(E)?o(E):null,F=0;return this.map(function(){
var H=this;while(H&&H.ownerDocument){
if(G?G.index(H)>-1:o(H).is(E)){
o.data(H,"closest",F);return H}H=H.parentNode;F++}})},not:function(E){
if(typeof E==="string"){
if(f.test(E)){
return this.pushStack(o.multiFilter(E,this,true),"not",E)}else{
E=o.multiFilter(E,this)}}var F=E.length&&E[E.length-1]!==g&&!E.nodeType;return this.filter(function(){
return F?o.inArray(this,E)<0:this!=E})},add:function(E){
return this.pushStack(o.unique(o.merge(this.get(),typeof E==="string"?o(E):o.makeArray(E))))},is:function(E){
return !!E&&o.multiFilter(E,this).length>0},hasClass:function(E){
return !!E&&this.is("."+E)},val:function(K){
if(K===g){
var E=this[0];if(E){
if(o.nodeName(E,"option")){
return(E.attributes.value||{
}).specified?E.value:E.text}if(o.nodeName(E,"select")){
var I=E.selectedIndex,L=[],M=E.options,H=E.type=="select-one";if(I<0){
return null}for(var F=H?I:0,J=H?I+1:M.length;F<J;F++){
var G=M[F];if(G.selected){
K=o