欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 20:57:45
 这个键盘用html+js+css搞出来的,做这个没什么目的,纯粹觉得好玩。     现在暂时的功能有:     1、可按键跟踪...

 这个键盘用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