用html+js+css做一个模拟键盘

这个键盘用html+js+css搞出来的，做这个没什么目的，纯粹觉得好玩。现在暂时的功能有： 1、可按键跟踪 2、可大小写切换 3、可鼠标点击输入 4、可移动键盘位置可拓展功能有： 1、可改变键盘大小...

这个键盘用html+js+css搞出来的，做这个没什么目的，纯粹觉得好玩。
现在暂时的功能有：

1、可按键跟踪

2、可大小写切换

3、可鼠标点击输入

4、可移动键盘位置

可拓展功能有：

1、可改变键盘大小

2、可改变主题

3、对某些按键添加事件

4、结合html5的canvas弄个打字游戏啥的（想想就有趣^_^）

ps(本人js和css都是菜鸟一枚，不喜可以喷，但请勿涉及家人)

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 = $('<div class="simpleKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
66             $("#keyboardNum").append(key);
67         }
68         else {
69             key = $('<div class="backspaceKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
70             $("#keyboardNum").append(key);
71         }
72     });
73
74     $.each(keyboardLetterQ, function (key, value) {
75         key = $('<div class="simpleKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
76         $("#keyboardLetterQ").append(key);
77     });
78
79     $.each(keyboardLetterA, function (key, value) {
80         if (value != "Caps Lock") {
81             key = $('<div class="simpleKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
82             $("#keyboardLetterA").append(key);
83         }
84         else {
85             key = $('<div class="capslockKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
86             $("#keyboardLetterA").append(key);
87         }
88     });
89
90     $.each(keyboardLetterZ, function (key, value) {
91         if (value != "Shift") {
92             key = $('<div class="simpleKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
93             $("#keyboardLetterA").append(key);
94         }
95         else {
96             key = $('<div class="shiftKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
97             $("#keyboardLetterA").append(key);
98         }
99     });
100
101     $.each(keyboardSpaceBar, function (key, value) {
102         if (value != "Space") {
103             key = $('<div class="simpleKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
104             $("#keyboardSpaceBar").append(key);
105         }
106         else {
107             key = $('<div class="spaceKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
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     $("div[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         $("div[name='key']").css("background-color", "White")
206         $("div[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 divKeyBoard = '<div id="keyboard" class="keyboard"><div id="keyboardHead"><div><input id="shift" type="checkbox"/>Shift</div><div><input id="capsLock" type="checkbox"/>Caps Lock</div><div 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"/></div></div><div id="keyboardNum"></div><div id="keyboardLetterQ"></div><div id="keyboardLetterA"></div><div id="keyboardLetterZ"></div><div id="keyboardSpaceBar"></div></div>';
234     $("body").append(divKeyBoard);
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 div
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 div[name="key"]:hover{
75     background: Gray;
76 }
77
78 .keyboard div[name="key"]
79 {
80     cursor:pointer;
81 }

posted @ 2012-12-20 14:30 alxe_yu 阅读(1251) 评论(0) 收藏举报

刷新页面返回顶部

alxe_yu

用html+js+css做一个模拟键盘

公告