keyboard.js内容
$(document).ready(function() {var $writeBox = $('#write'),shift = false,capslock = false;$('#keyboard li').hover(function() {$(this).addClass('hover');}, function() {$(this).removeClass('hover');}).click(function() {var $this = $(this),charater = $this.html();// 一键两意if($this.hasClass('symbol')) charater = $('span:visible', $this).html();// Button detele if($this.hasClass('delete')) {var html = $writeBox.html();$writeBox.html(html.substring(0, html.length-1));return false;};// Button tabif($this.hasClass('tab')) charater = '\t';// Button capslockif($this.hasClass('capslock')) {$('.letter').toggleClass('uppercase');capslock = true;return false;};// Button enterif($this.hasClass('enter')) charater = '\n';// Button shiftif($this.hasClass('left-shift') || $this.hasClass('right-shift')) {$('.letter').toggleClass('uppercase');$('.symbol span').toggle();shift = (shift === true) ? false : true;capslock = false;return false;};// Button spaceif($this.hasClass('space')) charater = ' ';// 转换为大写if($this.hasClass('uppercase')) charater = charater.toUpperCase();// 输出所按的键值$writeBox.html($writeBox.html() + charater);});});
style.css内容：
* { margin:0; padding:0;}body { font:10px Tahoma, Geneva, sans-serif; background:#eee;}#container { width:430px; margin:10px;}#write { border:none; width:410px; height:120px; background:#fff; padding:5px; margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9; font-size:11px;}#keyboard { list-style:none;}#keyboard li { float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; margin:0 5px 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9;}.tab, .capslock, .left-shift, .space { clear:left;}#keyboard li.lastitem { margin-right:0;}#keyboard li.delete { width:70px;}#keyboard li.tab { width:70px;}#keyboard li.capslock { width:75px;}#keyboard li.enter { width:40px;}#keyboard li.left-shift { width:80px;}#keyboard li.right-shift { width:65px;}#keyboard li.space { width:420px;}#keyboard li:hover, .hover { position:relative; top:1px; left:1px; cursor:pointer; border-color:#e5e5e5;}.on { display:none;}.uppercase { text-transform:uppercase;}
index.html内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Keyboard</title><link rel="stylesheet" type="text/css" href="style.css" /><!--[if lt ie 8]><style type="text/css">#write { margin-left:-10px;}</style><![endif]--></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">{1}lt;/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="enter lastitem">enter</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">space</li></ul></div><script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="keyboard.js"></script></body></html>
