用html+js+css做一个模拟键盘
这个键盘用html+js+css搞出来的，做这个没什么目的，纯粹觉得好玩。
现在暂时的功能有：
1、可按键跟踪
2、可大小写切换
3、可鼠标点击输入
4、可移动键盘位置
可拓展功能有：
1、可改变键盘大小
2、可改变主题
3、对某些按键添加事件
4、结合html5的canvas弄个打字游戏啥的（想想就有趣^_^）
ps(本人js和css都是菜鸟一枚，不喜可以喷，但请勿涉及家人)
html
<html xmlns="">
<head>
<title></title>
<link href="css/keyboard.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/keyboard.js" type="text/javascript"></script>
</head>
<body>
<input id="state" type="hidden" />
<input id="txtid" type="text" onclick='openkeyboard("txtid");' />
<p id="keyboardparent">
</p>
</body>
</html>
keytboard.js
view code
1 //移动键盘
2 function dragming(idorclass1, idorclass2) {
3 var obj = this; //这里的this是指dragming对象么
4 this.idorclass1 = idorclass1; //给dragming的idorclass1赋值
5 this.idorclass2 = idorclass2; //给dragming的idorclass2赋值
6 this.deltax = 0;
7 this.deltay = 0;
8
9 function dragstart(dragevent) {
10 obj.deltax = dragevent.clientx - $(obj.idorclass2).offset().left;
11 obj.deltay = dragevent.clienty - $(obj.idorclass2).offset().top;
12 $(document).bind("mousemove", dragmove);
13 $(document).bind("mouseup", dragstop);
14 dragevent.preventdefault();
15
16 }
17 function dragmove(dragevent) {
18 $(obj.idorclass2).css({
19 "left": (dragevent.clientx - obj.deltax) + "px",
20 "top": (dragevent.clienty - obj.deltay) + "px"
21 })
22 dragevent.preventdefault();
23
24 }
25 function dragstop() {
26 $(document).unbind("mousemove", dragmove);
27 $(document).unbind("mouseup", dragstop);
28
29 }
30
31 $(document).ready(function () {
32 $(obj.idorclass1).bind("mousedown", dragstart);
33
34 })
35 }
36
37
38
39 //绘制键盘
40 function drawkeyboard(type) {
41 $("#keyboardnum").empty();
42 $("#keyboardletterq").empty();
43 $("#keyboardlettera").empty();
44 $("#keyboardletterz").empty();
45 $("#keyboardspacebar").empty();
46
47 if (type == "lower") {
48 var keyboardnum = { "192": "`", "49": "1", "50": "2", "51": "3", "52": "4", "53": "5", "54": "6", "55": "7", "56": "8", "57": "9", "48": "0", "189": "-", "187": "=", "8": "backspace" };
49 var keyboardletterq = { "81": "q", "87": "w", "69": "e", "82": "r", "84": "t", "89": "y", "85": "u", "73": "i", "79": "o", "80": "p", "219": "[", "221": "]" };
50 var keyboardlettera = { "20": "caps lock", "65": "a", "83": "s", "68": "d", "70": "f", "71": "g", "72": "h", "74": "j", "75": "k", "76": "l", "186": ";", "222": "'", "220": "\\" };
51 var keyboardletterz = { "16": "shift", "90": "z", "88": "x", "67": "c", "86": "v", "66": "b", "78": "n", "77": "m", "188": ",", "190": ".", "191": "/" };
52 var keyboardspacebar = { "32": "space", "": "tim" };
53 var key = "";
54 }
55 else {
56 var keyboardnum = { "192": "~", "49": "!", "50": "@", "51": "#", "52": "$", "53": "%", "54": "^", "55": "&", "56": "*", "57": "(", "48": ")", "189": "_", "187": "+", "8": "backspace" };
57 var keyboardletterq = { "81": "q", "87": "w", "69": "e", "82": "r", "84": "t", "89": "y", "85": "u", "73": "i", "79": "o", "80": "p", "219": "{", "221": "}" };
58 var keyboardlettera = { "20": "caps lock", "65": "a", "83": "s", "68": "d", "70": "f", "71": "g", "72": "h", "74": "j", "75": "k", "76": "l", "186": ":", "222": "\"", "220": "|" };
59 var keyboardletterz = { "16": "shift", "90": "z", "88": "x", "67": "c", "86": "v", "66": "b", "78": "n", "77": "m", "188": "<", "190": ">", "191": "?" };
60 var keyboardspacebar = { "32": "space", "": "tim" };
61 var key = "";
62 }
63 $.each(keyboardnum, function (key, value) {
64 if (value != "backspace") {
65 key = $('<p class="simplekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
66 $("#keyboardnum").append(key);
67 }
68 else {
69 key = $('<p class="backspacekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
70 $("#keyboardnum").append(key);
71 }
72 });
73
74 $.each(keyboardletterq, function (key, value) {
75 key = $('<p class="simplekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
76 $("#keyboardletterq").append(key);
77 });
78
79 $.each(keyboardlettera, function (key, value) {
80 if (value != "caps lock") {
81 key = $('<p class="simplekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
82 $("#keyboardlettera").append(key);
83 }
84 else {
85 key = $('<p class="capslockkey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
86 $("#keyboardlettera").append(key);
87 }
88 });
89
90 $.each(keyboardletterz, function (key, value) {
91 if (value != "shift") {
92 key = $('<p class="simplekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
93 $("#keyboardlettera").append(key);
94 }
95 else {
96 key = $('<p class="shiftkey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
97 $("#keyboardlettera").append(key);
98 }
99 });
100
101 $.each(keyboardspacebar, function (key, value) {
102 if (value != "space") {
103 key = $('<p class="simplekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
104 $("#keyboardspacebar").append(key);
105 }
106 else {
107 key = $('<p class="spacekey" name="key" key="' + key + '" value="' + value + '">' + value + '</p>');
108 $("#keyboardspacebar").append(key);
109 }
110 });
111
112 addmouseclickevent();
113
114
115 }
116
117 //监听鼠标点击事件
118 function addmouseclickevent() {
119 $("#close").click(function () {
120 closekeyboard()
121 });
122
123 $("p[name='key']").hover(function () {
124 $(this).css("background-color", "gray");
125 }, function () {
126 $(this).css("background-color", "white");
127 }).click(function () {
128 var thisvalue = $(this).attr("value");
129 var id = $("#state").val();
130 switch (thisvalue) {
131 case "": //"
132 $("#" + id).val($("#" + id).val() + "\"");
133 if ($("#shift").attr("checked") == true) {
134 if ($("#capslock").attr("checked") != true) {
135 drawkeyboard("lower");
136 }
137 $("#shift").attr("checked", false);
138 }
139 break;
140 case "shift":
141 $("#shift").attr("checked", $("#shift").attr("checked") == true ? false : true);
142 if ($("#shift").attr("checked") == true) {
143 drawkeyboard("upper")
144 }
145 else {
146 if ($("#capslock").attr("checked") != true) {
147 drawkeyboard("lower");
148 }
149 }
150 break;
151 case "caps lock":
152 $("#capslock").attr("checked", $("#capslock").attr("checked") == true ? false : true);
153 $("#capslock").attr("checked") == true ? drawkeyboard("upper") : drawkeyboard("lower");
154 $("#shift").attr("checked", false)
155 break;
156 case "space":
157 $("#" + id).val($("#" + id).val() + " ");
158 break;
159 case "backspace":
160 $("#" + id).val($("#" + id).val().substring(0, $("#" + id).val().length - 1));
161 break;
162 default:
163 $("#" + id).val($("#" + id).val() + thisvalue);
164 if ($("#shift").attr("checked") == true) {
165 if ($("#capslock").attr("checked") != true) {
166 drawkeyboard("lower");
167 }
168 $("#shift").attr("checked", false);
169 }
170
171 break;
172 }
173 $("#" + id).focus();
174 });
175 }
176
177
178 //监听键盘事件
179 function addkeydownevent() {
180 $("html").keydown(function (event) {
181 var realkey = string.fromcharcode(event.keycode);
182
183 //特殊键
184 if (event.keycode == 32) { realkey = "space" }
185 if (event.keycode == 13) { realkey = "enter" }
186 if (event.keycode == 27) { realkey = " esc" }
187 if (event.keycode == 16) {
188 realkey = "shift";
189 $("#shift").attr("checked", $("#shift").attr("checked") == true ? false : true);
190 if ($("#shift").attr("checked") == true) {
191 drawkeyboard("upper")
192 }
193 else {
194 if ($("#capslock").attr("checked") != true) {
195 drawkeyboard("lower");
196 }
197 }
198 }
199 if (event.keycode == 17) { realkey = " ctrl" }
200 if (event.keycode == 18) { realkey = "alt" }
201 if (event.keycode == 8) { realkey = "backspace" }
202 if (event.keycode == 20) { realkey = "caps lock"; $("#capslock").attr("checked", $("#capslock").attr("checked") == true ? false : true); $("#capslock").attr("checked") == true ? drawkeyboard("upper") : drawkeyboard("lower"); }
203
204
205 $("p[name='key']").css("background-color", "white")
206 $("p[key=" + event.keycode + "]").css("background-color", "gray");
207
208 //如果按了shif再按其他键并且这个键不是shif键盘变回小写
209 //如果capslock选中了键盘就不用变回小写
210 if ($("#shift").attr("checked") == true && event.keycode != 16) {
211 if ($("#capslock").attr("checked") != true) {
212 drawkeyboard("lower");
213 }
214 $("#shift").attr("checked", false);
215 }
216
217 });
218 }
219
220 //打开键盘
221 function openkeyboard(id) {
222 $("#keyboard").css("visibility", "visible");
223 $("#state").val(id);
224 }
225
226 //关闭键盘
227 function closekeyboard() {
228 $("#keyboard").css("visibility", "hidden")
229 }
230
231
232 $(function () {
233 var pkeyboard = '<p id="keyboard" class="keyboard"><p id="keyboardhead"><p><input id="shift" type="checkbox"/>shift</p><p><input id="capslock" type="checkbox"/>caps lock</p><p id="close" style="border:1px solid black; float:right; width:20px; height:20px; cursor:pointer;"><img src="/image/close.gif" style=" width:20px; height:20px"/></p></p><p id="keyboardnum"></p><p id="keyboardletterq"></p><p id="keyboardlettera"></p><p id="keyboardletterz"></p><p id="keyboardspacebar"></p></p>';
234 $("body").append(pkeyboard);
235 drawkeyboard("lower");
236 addkeydownevent();
237 $("#keyboard").css("visibility", "hidden");
238 var drag = new dragming("#keyboard", "#keyboard");
239
240 })
241
242
1 .keyboard
2 {
3 width:800px;
4 height:300px;
5 text-align:center;
6 position:absolute;
7 }
8
9 .keyboard p
10 {
11 height:50px;
12 line-height:50px;
13 float:left;
14 }
15
16 #keyboardhead
17 {
18 width:800px;
19 position:relative;
20 }
21
22 #keyboardletterq
23 {
24 width:800px;
25 position:relative;
26 left:75px;
27 }
28
29 #keyboardspacebar 30 {
31 width:800px;
32 position:relative;
33 left:200px;
34 top:52px;
35 }
36
37 .simplekey
38 {
39 width:50px;
40 border:1px solid black;
41 }
42
43 .enterkey
44 {
45 width:100px;
46 height:100px;
47 border:1px solid black;
48 }
49
50 .shiftkey
51 {
52 width:115px;
53 border:1px solid black;
54 }
55
56 .backspacekey
57 {
58 width:120px;
59 border:1px solid black;
60 }
61
62 .capslockkey
63 {
64 width:90px;
65 border:1px solid black;
66 }
67
68 .spacekey
69 {
70 width:300px;
71 border:1px solid black;
72 }
73
74 .keyboard p[name="key"]:hover{
75 background: gray;
76 }
77
78 .keyboard p[name="key"]
79 {
80 cursor:pointer;
81 }
作者：tbwshc