利用CSS和jQuery创建一个屏幕键盘

有时候利用我们所知的程序语言来制造一些快乐，看看我们能做出些什么东西来是很有趣的事情。我想用CSS来创建一个小巧的屏幕键盘，然后拿jQuery使这个键盘真正可用，那将是多好玩的一件事啊。这个屏幕键盘还包含一些“功能键”（CapsLock，Shift，Delete），当我们点击键盘时，它们也可以动态地变化。现在我教你怎么来制作它。

源文件 | DEMO演示

第一步：基本的HTML和所需的文件

制作这个键盘需要大量的HTML代码，然后用CSS设置外观。每一个键都将使用li标签包围，再把它们置入一个ul无序列表标签中，而每个li元素也将拥有一个class属性，便于在CSS和jQuery中使用。一般的类属性都是“letter”、“lastitem”等，以便于我们容易找到想要的那个li。首先在你想要的地方创建一个新的文件夹，在这个新文件夹里创建一个index.html文件，再创建css和js两个空文件夹。最后，在css文件夹里创建style.css文件，在js文件夹里面创建keyboard.js文件。

在这个HTML文件里，我们要调用两个js文件和一个css文件，在body标签的里面，将写上大量的包含字母、数字和功能键的li元素，还包括一个id为keyboard的文本域（textarea）元素，用来显示键盘上“打”出来的字符。下面列出index.html文件中的所有代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Online Keyboard</title>
	<link rel="stylesheet" type="text/css" href="css/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">&amp;</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">&quot;</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">&lt;</span></li>
		<li class="symbol"><span class="off">.</span><span class="on">&gt;</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">&nbsp;</li>
	</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

不要太在意这巨量的li元素，我们使用jQuery代码的时候我会解释它们的作用，而其他的一些类名，比如right-shift和lastitem，是因为我们在CSS中要用到它们。

第二步：美化这些列表元素

只使用Javascript而不使用CSS的话，这个键盘工作起来也正常，但它就会看起来不像键盘。下面的样式的作用我不会逐个去解释，因为它们很容易看懂，然后将下面的代码保存到style.css文件中去，放到css文件夹里面。

* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
	#keyboard li {
	float: left;
	margin: 0 5px 5px 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #f9f9f9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			#keyboard .tab, #keyboard .delete {
			width: 70px;
			}
			#keyboard .capslock {
			width: 80px;
			}
			#keyboard .return {
			width: 77px;
			}
			#keyboard .left-shift {
			width: 95px;
			}
			#keyboard .right-shift {
			width: 109px;
			}
		.lastitem {
		margin-right: 0;
		}
		.uppercase {
		text-transform: uppercase;
		}
		#keyboard .space {
		clear: left;
		width: 681px;
		}
		.on {
		display: none;
		}
		#keyboard li:hover {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
		}

注意下面的样式，它们非常重要

1、.on——在有的li标签中，有两个span标签，这是因为它们的按键上有两个字符，比如数字键。而拥有on类名的字符会隐藏起来，当点击shift按键时，它们才会出现。

2、.lastitem——每一行的最后一个字母所在的元素，都必须除掉其margin-right值，以免破坏布局。

第三步：让按键拥有生命

你现在如果单击这些按键，不会有任何效果，下面我们用一点jQuery代码来解决这个问题。我们的主体思想是为每个列表项加上单击处理，单击的同时获取按键上的文本，用列表项的类来处理这个问题。当然了，从现在开始的js代码，都请放到js文件夹下的keyboard.js这个文件里。

初始设置

使用jQuery，然后我们要定义三个变量，用于整个代码中，它们是文本域（textarea）、shift按键的状态和大写字母锁定键（CapsLock）的状态。

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

	// The rest of the code goes here.
});

下面要做的是，为每个列表项目（按键）都增加上单击处理，当按键被点击时我们要处理两个变量。定义$this来减少我们的输入，character则用来定义列表项目的HTML，如果列表项目中是个字母，则变量会按原值返回。

$('#keyboard li').click(function(){
	var $this = $(this),
		character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

	// Code for processing the key.
});

Shift键和CapsLock键

如果shift键（带有类left-shift或类right-shift）被点击了，我们要转换所有的字母为大写状态，对于带有类symbol的列表项目，我们将转换显示套嵌的span标签，然后我们要做的是为shift设置一个相反的布尔值（比如值为true就设置为false，反之亦然）。再为capslock设置false，然后返回false让character变量不发生变化。

// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
	$('.letter').toggleClass('uppercase');
	$('.symbol span').toggle();

	shift = (shift === true) ? false : true;
	capslock = false;
	return false;
}

现在，如果capslock键被点击，我们就转换为字母为小写，设置capslock变量为true，用false作为返回值。

// Caps lock
if ($this.hasClass('capslock')) {
	$('.letter').toggleClass('uppercase');
	capslock = true;
	return false;
}

删除键

为delete键，我们得指定另外一个变量：html——当前textarea中的内容。一旦点击了delete键，我们就用textarea中的值去掉最后一个字母，重新设置为textarea的内容，用Javascrip的substr方法来实现它。接着我们依然返回false让一切保持原样。

// Delete
if ($this.hasClass('delete')) {
	var html = $write.html();

	$write.html(html.substr(0, html.length - 1));
	return false;
}

特殊字符

对于不是字母键和功能键的其他按键，我们利用character变量来做一些特别的事情。对于带有symbol类的键，character就被设置为span为visible时的键的内容，然后空格用于空格键，点击Tab键时将character设置为\t，最后的回车键则设置character为\n。

// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";

大写字母

如果你还记得，当我们按下键盘上的shift或者CapsLock键，那么“uppercase”这个类就会用toggleClass这个函数添加或删除到键盘上的字母键上。如果这个类在字母键上找不到，那么这些字母都会使用toUpperCase的方法，转化为相应的大写形式。

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

最后

对于正常的键盘，shift键每次只对一个字母键起作用。如果shift变量被设置为true，我们就转换symbol的span的显示，同样的，当CapsLock键被按下时，字母键的大小写也会进行转换。

最后要做的，就是把字母都显示到textarea文本区内并且让用户可以继续“键入”。

// Remove shift once a key is clicked.
if (shift === true) {
	$('.symbol span').toggle();
	if (capslock === false) $('.letter').toggleClass('uppercase');

	shift = false;
}

// Add the character
$write.html($write.html() + character);

最终的Javascript代码

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

	$('#keyboard li').click(function(){
		var $this = $(this),
			character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

		// Shift keys
		if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();

			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		}

		// Caps lock
		if ($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		}

		// Delete
		if ($this.hasClass('delete')) {
			var html = $write.html();

			$write.html(html.substr(0, html.length - 1));
			return false;
		}

		// Special characters
		if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
		if ($this.hasClass('space')) character = ' ';
		if ($this.hasClass('tab')) character = "\t";
		if ($this.hasClass('return')) character = "\n";

		// Uppercase letter
		if ($this.hasClass('uppercase')) character = character.toUpperCase();

		// Remove shift once a key is clicked.
		if (shift === true) {
			$('.symbol span').toggle();
			if (capslock === false) $('.letter').toggleClass('uppercase');

			shift = false;
		}

		// Add the character
		$write.html($write.html() + character);
	});
});

总结

有时像这样折腾一下挺好的，虽然可能最后的结果不完全如我们所愿。这次，只需要对列表的项目应用一些类名，我们就可以用CSS和jQuery来创建一个屏幕键盘。我们今天做的这个屏幕键盘也不是完全没用，有的网站上不就有屏幕键盘来辅助输入的么？关键在于，这样折腾一下，能让我们更好的理解CSS和jQuery搭配使用能产生的强大效果。

文本来源于Creating a Keyboard with CSS and jQuery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

本文信息: 文章发布于2010年1月23日/trackback地址/收藏、分享这篇文章! /跳转到留言框

目前已经有 42 条回复，欢迎继续就座

walysclw

17:03@2010年01月23日 [回复]

抢sf抢sf
先抢再看
Todd

18:46@2010年01月23日 [回复]

我今天还在你这里学用 Photoshop 来着~
Dianso

19:26@2010年01月23日 [回复]

太强大了，以前见过纯JS的桌球和小游戏。
welee

19:35@2010年01月23日 [回复]

这个键盘既强大又精美，拿来用在需要输入密码的网站很实用。
ZH CEXO

20:39@2010年01月23日 [回复]

@Todd:真的呀，哈哈，可惜我好久没练习ps了
@Dianso:纯的js能做的事相当多，jQuery用于网页设计倒是相当不错，只是我的jQ水平还相当烂啦，实践得太少了……
@welee:嗯，和lightbox配合，效果一定不错，但我的js很烂，才刚起步，算starter吧
章鱼

21:35@2010年01月23日 [回复]

不懂看看围观下
Leeiio

23:08@2010年01月23日 [回复]

很强力，得仔细看看。
ZH CEXO

23:20@2010年01月23日 [回复]

@Leeiio:这个……我译得可能比较烂，能看原文尽量看原文吧
Auston Jary

00:24@2010年01月24日 [回复]

这个太帅了
fisio

02:05@2010年01月24日 [回复]

要是 capslock 按下的时候像 mac 键盘那样按键上亮灯就完美了。。。
ZH CEXO

13:15@2010年01月24日 [回复]

@fisio:这个应该不难做，只是作者没有弄出来而已，我想，应该对capslock变量进行判断，改变一下样式就行了，只是键盘上没给灯留位置呵
shuil

17:01@2010年01月25日 [回复]

很不错的创意呀
会律博客

21:09@2010年01月25日 [回复]

恩必须称呼Geek了！
左岸读书

22:38@2010年01月25日 [回复]

运用之妙，存乎一心！
an9

21:05@2010年01月26日 [回复]

路过一下。
ZH CEXO

21:11@2010年01月26日 [回复]

@会律博客:别说了
@左岸读书:嗯，老外的创意很足的
@an9:真不负责任
Firm

23:14@2010年01月27日 [回复]

强悍啊，俺来晚了，收藏了订阅了
leehow

15:26@2010年01月28日 [回复]

厉害了，放寒假了吧，怎么过啊？
ZH CEXO

15:31@2010年01月28日 [回复]

@leehow:这个厉害的可不是我啊，我只是翻译了一下而已……
寒假放了，最后一个寒假来着，也没什么特别要做的事，有空折腾一下吧
leehow

23:04@2010年01月28日 [回复]

@ZH CEXO:你大几？是读研还是工作啊？
ZH CEXO

23:21@2010年01月28日 [回复]

@leehow:我大四啊，还有半年毕业，没读研，想跨专业找工作，因为我读的分析化学。工作目前没找着，乱漂着
Lucifr

11:41@2010年01月29日 [回复]

SyntaxHighlighter 这个插件不错啊，学习了，之前一直用 coolcode ，这个插件对中文注释支持的如何啊？
久酷

16:37@2010年01月29日 [回复]

这个安全性高啊下次我输网址的时候这样输,让网址保密
bwskyer

18:05@2010年01月31日 [回复]

完全看不懂~~ 对jQuery茫然.
ZH CEXO

21:13@2010年01月31日 [回复]

@Lucifr:这个插件很好啊，只不过插件版的我怎么都用不了，我直接调用的代码，它也支持中文的，很不错
@bwskyer:我也只是看得懂，但让我写我又写不出来，我现在学习jQ就这样，看得懂，写不出
Louis Han

22:37@2010年01月31日 [回复]

效果很不错就是上面的字体小了些
宁波SEO

19:58@2010年02月2日 [回复]

博主知识面真广啊~
少杰

16:30@2010年02月4日 [回复]

你好真能折腾。这个都能搞出来。
aunsen

17:55@2010年02月9日 [回复]

晕乎乎，好多代码
小宇

21:04@2010年02月10日 [回复]

博主是个高手…
做不做链接呀
QQ:cw723#163.com
有兴趣做链接找我呀
ZH CEXO

10:19@2010年02月11日 [回复]

@小宇:我不是高手啦，这是我翻译的一篇文章，学习用的。欢迎你的到来，新年快乐！
小宇

10:20@2010年02月11日 [回复]

@ZH CEXO:
是否做链接呢
ZH CEXO

10:23@2010年02月11日 [回复]

@小宇:链接目前就算了吧，我一般不换链接的，和我换链接的人，都是很熟悉的人，而且我更新得很少，对你的权值可能没什么帮助吧
章鱼

00:12@2010年02月14日 [回复]

老胸新年快乐
ZH CEXO

00:15@2010年02月14日 [回复]

@章鱼:小弟，你也新快乐
久酷

08:43@2010年02月14日 [回复]

春节快乐哈…………久酷来拜年,哈哈
ZH CEXO

08:50@2010年02月14日 [回复]

@久酷:谢谢谢谢，新年快乐
leehow

09:44@2010年02月14日 [回复]

来拜年了~
ZH CEXO

10:06@2010年02月14日 [回复]

@leehow:谢谢猫姐，新年快乐！
三七八蛋

15:27@2010年02月18日 [回复]

代码看晕我了。
三七八蛋特来祝贺虎年大吉！！
Epile

19:11@2010年02月20日 [回复]

这里人气真好~
ZH CEXO

21:02@2010年02月20日 [回复]

@Epile:也没什么人气啦，没看见大多数都是我回复的留言

2 Trackbacks

By Tweets that mention 利用CSS和jQuery创建一个屏幕键盘 – ZH CEXO's BLOG -- Topsy.com on 2010年01月24日 at 00:11

[...] This post was mentioned on Twitter by sofish and welee, ZH_CEXO. ZH_CEXO said: 利用CSS和jQuery创建一个屏幕键盘 http://tinyurl.com/yd66qse [...]
By 利用CSS和jQuery创建一个屏幕键盘 « 寂静小站 – 网摘 on 2010年01月24日 at 09:58

[...] jQuery, Keyboard本站仅为镜像，若想浏览完整文章或发表评论，请前往原址： http://www.zhcexo.com/creating-a-keyboard-with-css-and-jquery/ 寂静小站 – 网摘 is proudly powered by WordPress MU running on 寂静小站. Entries [...]

ZH CEXO’s BLOG

Search