用html+js+css做一个模拟键盘
这个键盘用html+js+css搞出来的,做这个没什么目的,纯粹觉得好玩。现在暂时的功能有:
1、可按键跟踪
2、可大小写切换
3、可鼠标点击输入
4、可移动键盘位置
可拓展功能有:
1、可改变键盘大小
2、可改变主题
3、对某些按键添加事件
4、结合html5的canvas弄个打字游戏啥的(想想就有趣^_^)
ps(本人js和css都是菜鸟一枚,不喜可以喷,但请勿涉及家人)
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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");'
/>
<
div
id
=
"keyboardParent"
>
</
div
>
</
body
>
</
html
>
|
keytBoard.js
![](http://img.e-com-net.com/image/product/6608db1168bd40d689802616642f351b.gif)
![](http://img.e-com-net.com/image/product/68fbd65e7a7842d78f7ff5544f4ff423.gif)
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
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 }