效果图
这个键盘用html+js+css搞出来的,做这个没什么目的,纯粹觉得好玩。
现在暂时的功能有:
1、可按键跟踪
2、可大小写切换
3、可鼠标点击输入
4、可移动键盘位置
可拓展功能有:
1、可改变键盘大小
2、可改变主题
3、对某些按键添加事件
4、结合html5的canvas弄个打字游戏啥的(想想就有趣^_^)
ps(本人js和css都是菜鸟一枚,不喜可以喷,但请勿涉及家人)
html
<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" οnclick='openKeyboard("txtID");' />
<div id="keyboardParent">
</div>
</body>
</html>
keyBoard.js
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.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
keyboard.css
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
copyright © Tim demo下载