Javascript实现虚拟键盘

 
 

 

//html
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <link rel="stylesheet" href="./akeyboard.css">
 8     <script src="./akeyboard.js"></script>
 9     <script src="./jquery-1.8.0.min.js"></script>
10 </head>
11 <body>
12     <input type="text" name="" id="input1" style="width: 200px;">
13     <input type="text" name="" id="input2" style="width: 200px;">
14     <div id="keyboard"  style="z-index:10000;position:fixed"></div>    
15     <div class="aui_close_keyboard_explorer"  style="z-index:10000;position:fixed"></div>
16 </body>
17 <script>
18     var keyboard =  new aKeyboard.keyboard({
19         el: '#keyboard',
20         style: {"margin-bottom":"30px"},
21         fixedBottomCenter: true,
22         
23         });
24     window.onload=function(){
25         $(".akeyboard-keyboard-keys").css({"background-color":"#eee"})
26         $(".aui_close_keyboard_explorer").bind("click", function(){
27                         $("#keyboard").hide();    
28                         $(".aui_close_keyboard_explorer").hide()
29         })
30         $(".getsecretusb_frame input[type='password']").live("focus",function(){
31                 let a =$(this)[0]
32                 keyboard.inputOn(a,'value');
33                 $("#keyboard").show();    
34                 $(".aui_close_keyboard_explorer").show() 
35          })
36 
37     }
38     var bindInput = function(idArray){
39                 idArray.forEach(element => {
40                     $("#"+element).live("focus",function(){
41                         $("#keyboard").show();    
42                         $(".aui_close_keyboard_explorer").show() 
43                         keyboard.inputOn("#"+element, 'value');
44                     })
45               
46                 });
47     }  
48     var idArray =["input1","input2"]
49     bindInput(idArray)
50 </script>
51 </html>

 

 
//  akeyboadr.js
　 
  1 ! function(e) {
  2     var o = {};
  3 
  4     function n(t) {
  5         if (o[t]) return o[t].exports;
  6         var r = o[t] = {
  7             i: t,
  8             l: !1,
  9             exports: {}
 10         };
 11         return e[t].call(r.exports, r, r.exports, n), r.l = !0, r.exports
 12     }
 13     n.m = e, n.c = o, n.d = function(e, o, t) {
 14         n.o(e, o) || Object.defineProperty(e, o, {
 15             enumerable: !0,
 16             get: t
 17         })
 18     }, n.r = function(e) {
 19         "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
 20             value: "Module"
 21         }), Object.defineProperty(e, "__esModule", {
 22             value: !0
 23         })
 24     }, n.t = function(e, o) {
 25         if (1 & o && (e = n(e)), 8 & o) return e;
 26         if (4 & o && "object" == typeof e && e && e.__esModule) return e;
 27         var t = Object.create(null);
 28         if (n.r(t), Object.defineProperty(t, "default", {
 29                 enumerable: !0,
 30                 value: e
 31             }), 2 & o && "string" != typeof e)
 32             for (var r in e) n.d(t, r, function(o) {
 33                 return e[o]
 34             }.bind(null, r));
 35         return t
 36     }, n.n = function(e) {
 37         var o = e && e.__esModule ? function() {
 38             return e.default
 39         } : function() {
 40             return e
 41         };
 42         return n.d(o, "a", o), o
 43     }, n.o = function(e, o) {
 44         return Object.prototype.hasOwnProperty.call(e, o)
 45     }, n.p = "", n(n.s = 0)
 46 }([function(e, o, n) {
 47     const t = n(1),
 48         r = n(2),
 49         a = n(3);
 50     window.aKeyboard = {
 51         keyboard: t,
 52         numberKeyboard: r,
 53         mobileKeyboard: a
 54     }
 55 }, function(e, o) {
 56     e.exports = class {
 57         constructor(e) {
 58             if ("object" != typeof e) return void console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
 59             this.obj = e;
 60             const o = document.querySelector(e.el);
 61             let n = "";
 62             if ("object" == typeof e.style)
 63                 for (let o in e.style) n += o + ": " + e.style[o] + ";";
 64             let t = '<div class="akeyboard-keyboard' + (e.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : "") + '" style="' + n + '">',
 65                 r = [];
 66                 
 67             for (let e = 1; e < 10; e++) r.push(e.toString());
 68             r.push("0");
 69             console.log(r);
 70             const a = [
 71                 ["Exit"],
 72                 ["`"].concat(r).concat(["-", "=", "Delete"]), ["Tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
 73                 ["Caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
 74                 ["Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift"],
 75                 ["Space"]
 76             ];
 77             let s;
 78             const c = [],
 79                 i = [];
 80             for (let e = 0; e < a.length; e++) {
 81                 c.push([]), i.push([]), s = a[e];
 82                 for (let o = 0; o < s.length; o++)
 83                     if (1 !== s[o].length) c[e].push(s[o]), i[e].push(s[o]);
 84                     else {
 85                         switch (i[e].push(s[o].toUpperCase()), s[o]) {
 86                             case "`":
 87                                 c[e].push("~");
 88                                 continue;
 89                             case "1":
 90                                 c[e].push("!");
 91                                 continue;
 92                             case "2":
 93                                 c[e].push("@");
 94                                 continue;
 95                             case "3":
 96                                 c[e].push("#");
 97                                 continue;
 98                             case "4":
 99                                 c[e].push("$");
100                                 continue;
101                             case "5":
102                                 c[e].push("%");
103                                 continue;
104                             case "6":
105                                 c[e].push("^");
106                                 continue;
107                             case "7":
108                                 c[e].push("&");
109                                 continue;
110                             case "8":
111                                 c[e].push("*");
112                                 continue;
113                             case "9":
114                                 c[e].push("(");
115                                 continue;
116                             case "0":
117                                 c[e].push(")");
118                                 continue;
119                             case "-":
120                                 c[e].push("_");
121                                 continue;
122                             case "=":
123                                 c[e].push("+");
124                                 continue;
125                             case "[":
126                                 c[e].push("{");
127                                 continue;
128                             case "]":
129                                 c[e].push("}");
130                                 continue;
131                             case "\\":
132                                 c[e].push("|");
133                                 continue;
134                             case ";":
135                                 c[e].push(":");
136                                 continue;
137                             case "'":
138                                 c[e].push('"');
139                                 continue;
140                             case ",":
141                                 c[e].push("<");
142                                 continue;
143                             case ".":
144                                 c[e].push(">");
145                                 continue;
146                             case "/":
147                                 c[e].push("?");
148                                 continue
149                         }
150                         c[e].push(s[o].toUpperCase())
151                     }
152                    
153             }
154             console.log(c);console.log(i);console.log(s);
155         
156     
157             foo:{console.log('face');
158             break foo;
159             console.log('this will not be executed');}
160 
161             console.log('swap');
162             for (let e = 0; e < a.length; e++) {
163                 s = a[e], t += '<div class="akeyboard-keyboard-innerKeys">';
164                 for (let e = 0; e < s.length; e++) t += '<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-' + s[e] + '">' + s[e] + "</div>";
165                 t += "</div>"
166             }
167             t += "</div>", o.innerHTML = t;
168             const l = document.querySelectorAll(e.el + " .akeyboard-keyboard-keys-Shift");
169 
170             function d() {
171                 console.log(this.isShift);
172                 if (!this.isShift) {
173                     if (document.querySelector(e.el + " .akeyboard-keyboard-keys-Caps").isCaps) return;
174                     l[0].isShift = !0, l[1].isShift = !0, l[0].innerHTML = "SHIFT", l[1].innerHTML = "SHIFT";
175                     const o = document.querySelectorAll(e.el + " .akeyboard-keyboard-innerKeys");
176                     let n;
177                     for (let e = 0; e < o.length; e++) {
178                         n = o[e];
179                         for (let o = 0; o < n.childNodes.length; o++) "Shift" !== c[e][o] && (n.childNodes[o].innerHTML = c[e][o])
180                     }
181                     return
182                 }
183                 l[0].isShift = !1, l[1].isShift = !1, l[0].innerHTML = "Shift", l[1].innerHTML = "Shift";
184                 const o = document.querySelectorAll(e.el + " .akeyboard-keyboard-innerKeys");
185                 let n;
186                 for (let e = 0; e < o.length; e++) {
187                     n = o[e];
188                     for (let o = 0; o < n.childNodes.length; o++) n.childNodes[o].innerHTML = a[e][o]
189                 }
190             }
191             l[0].onclick = d, l[0].isShift = !1, l[1].onclick = d, l[1].isShift = !1;
192             const u = document.querySelector(e.el + " .akeyboard-keyboard-keys-Caps");
193             u.onclick = function() {
194                 if (!this.isCaps) {
195                     if (document.querySelector(e.el + " .akeyboard-keyboard-keys-Shift").isShift) return;
196                     this.isCaps = !0, this.classList.add("keyboard-keyboard-keys-focus");
197                     const o = document.querySelectorAll(e.el + " .akeyboard-keyboard-innerKeys");
198                     let n;
199                     for (let e = 0; e < o.length; e++) {
200                         n = o[e];
201                         for (let o = 0; o < n.childNodes.length; o++) n.childNodes[o].innerHTML = i[e][o]
202                     }
203                     return
204                 }
205                 this.isCaps = !1, this.classList.remove("keyboard-keyboard-keys-focus");
206                 const o = document.querySelectorAll(e.el + " .akeyboard-keyboard-innerKeys");
207                 let n;
208                 for (let e = 0; e < o.length; e++) {
209                     n = o[e];
210                     for (let o = 0; o < n.childNodes.length; o++) n.childNodes[o].innerHTML = a[e][o]
211                 }
212             }, u.isCaps = !1
213         }
214         inputOn(e, o) {
215             if ("string" != typeof e) return void console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
216             if ("string" != typeof o) return void console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
217             const n = document.querySelector(e),
218                 t = document.querySelectorAll(this.obj.el + " .akeyboard-keyboard-keys");
219             for (let e = 0; e < t.length; e++) {
220                 switch (t[e].innerHTML) {
221                     case "Shift":
222                     case "Caps":
223                         continue;
224                     case "Delete":
225                         t[e].onclick = function() {
226                             n[o] = n[o].substr(0, n[o].length - 1)
227                         };
228                         continue;
229                     case "Tab":
230                         t[e].onclick = function() {
231                             n[o] += "  "
232                         };
233                         continue;
234                     case "Enter":
235                         t[e].onclick = function() {
236                             n[o] += "\n"
237                         };
238                         continue;
239                     case "Space":
240                         t[e].onclick = function() {
241                             n[o] += " "
242                         };
243                         continue
244                 }
245                 t[e].onclick = function() {
246                     n[o] += this.innerText
247                 }
248             }
249         }
250         onclick(e, o) {
251             if ("string" != typeof e) return void console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
252             if ("function" != typeof o) return void console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
253             if ("*" === e) {
254                 let e = document.querySelectorAll(this.obj.el + " .akeyboard-keyboard-keys");
255                 for (let n = 0; n < e.length; n++) e[n].onclick = o;
256                 return
257             }
258             document.querySelector(this.obj.el + " .akeyboard-keyboard-keys-" + e).onclick = o
259         }
260     }
261 }, function(e, o) {
262     e.exports = class {
263         constructor(e) {
264             if ("object" != typeof e) return void console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
265             this.obj = e;
266             const o = document.querySelector(e.el);
267             let n = "";
268             if ("object" == typeof e.style)
269                 for (let o in e.style) n += o + ": " + e.style[o] + ";";
270             let t = '<div class="akeyboard-numberKeyboard' + (e.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : "") + '" style="' + n + '">';
271             t += '<div class="akeyboard-keyboard-innerKeys">';
272             for (let e = 1; e < 10; e++) t += '<div class="akeyboard-keyboard-keys akeyboard-numberKeyboard-keys akeyboard-keyboard-keys-' + e + '">' + e + "</div>", e % 3 == 0 && (t += '</div><div class="akeyboard-keyboard-innerKeys">');
273             t += '<div class="akeyboard-keyboard-keys akeyboard-numberKeyboard-keys akeyboard-keyboard-keys-0">0</div><div class="akeyboard-keyboard-keys akeyboard-numberKeyboard-keys akeyboard-keyboard-keys-Delete">Delete</div></div><div class="akeyboard-keyboard-innerKeys"><div class="akeyboard-keyboard-keys akeyboard-numberKeyboard-keys akeyboard-numberKeyboard-keys-Enter">Enter</div></div>', t += "</div>", o.innerHTML = t
274         }
275         inputOn(e, o) {
276             if ("string" != typeof e) return void console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
277             if ("string" != typeof o) return void console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
278             const n = document.querySelector(e),
279                 t = document.querySelectorAll(this.obj.el + " .akeyboard-keyboard-keys");
280             for (let e = 0; e < t.length; e++) "Delete" !== t[e].innerHTML ? "Enter" !== t[e].innerHTML ? t[e].onclick = function() {
281                 n[o] += this.innerText
282             } : t[e].onclick = function() {
283                 n[o] += "\n"
284             } : t[e].onclick = function() {
285                 n[o] = n[o].substr(0, n[o].length - 1)
286             }
287         }
288         onclick(e, o) {
289             if ("string" != typeof e) return void console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
290             if ("function" != typeof o) return void console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
291             if ("*" === e) {
292                 let e = document.querySelectorAll(this.obj.el + " .akeyboard-numberKeyboard-keys");
293                 for (let n = 0; n < e.length; n++) e[n].onclick = o;
294                 return
295             }
296             document.querySelector(this.obj.el + " .akeyboard-numberKeyboard-keys-" + e).onclick = o
297         }
298     }
299 }, function(e, o) {
300     e.exports = class {
301         constructor(e) {
302             if ("object" != typeof e) return void console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
303             this.obj = e;
304             const o = document.querySelector(e.el);
305             let n = "";
306             if ("object" == typeof e.style)
307                 for (let o in e.style) n += o + ": " + e.style[o] + ";";
308             let t = '<div class="akeyboard-mobileKeyboard' + (e.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : "") + '" style="' + n + '">',
309                 r = [];
310             for (let e = 1; e < 10; e++) r.push(e.toString());
311             r.push("0");
312             const a = [
313                 ["`"].concat(r).concat(["-", "="]), ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
314                 ["a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'"],
315                 ["⇧", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "⇦"],
316                 ["Space", "Enter"]
317             ];
318             let s;
319             const c = [];
320             for (let e = 0; e < a.length; e++) {
321                 c.push([]), s = a[e];
322                 for (let o = 0; o < s.length; o++)
323                     if (1 !== s[o].length) c[e].push(s[o]);
324                     else {
325                         switch (s[o]) {
326                             case "`":
327                                 c[e].push("~");
328                                 continue;
329                             case "1":
330                                 c[e].push("!");
331                                 continue;
332                             case "2":
333                                 c[e].push("@");
334                                 continue;
335                             case "3":
336                                 c[e].push("#");
337                                 continue;
338                             case "4":
339                                 c[e].push("$");
340                                 continue;
341                             case "5":
342                                 c[e].push("%");
343                                 continue;
344                             case "6":
345                                 c[e].push("^");
346                                 continue;
347                             case "7":
348                                 c[e].push("&");
349                                 continue;
350                             case "8":
351                                 c[e].push("*");
352                                 continue;
353                             case "9":
354                                 c[e].push("(");
355                                 continue;
356                             case "0":
357                                 c[e].push(")");
358                                 continue;
359                             case "-":
360                                 c[e].push("_");
361                                 continue;
362                             case "=":
363                                 c[e].push("+");
364                                 continue;
365                             case "[":
366                                 c[e].push("{");
367                                 continue;
368                             case "]":
369                                 c[e].push("}");
370                                 continue;
371                             case "\\":
372                                 c[e].push("|");
373                                 continue;
374                             case ";":
375                                 c[e].push(":");
376                                 continue;
377                             case "'":
378                                 c[e].push('"');
379                                 continue;
380                             case ",":
381                                 c[e].push("<");
382                                 continue;
383                             case ".":
384                                 c[e].push(">");
385                                 continue;
386                             case "/":
387                                 c[e].push("?");
388                                 continue
389                         }
390                         c[e].push(s[o].toUpperCase())
391                     }
392             }
393             for (let e = 0; e < a.length; e++) {
394                 s = a[e], t += '<div class="akeyboard-keyboard-innerKeys">';
395                 for (let e = 0; e < s.length; e++) t += '<div class="akeyboard-mobileKeyboard-keys akeyboard-mobileKeyboard-keys-' + s[e] + '">' + s[e] + "</div>";
396                 t += "</div>"
397             }
398             t += "</div>", o.innerHTML = t;
399             const i = document.querySelector(e.el + " .akeyboard-mobileKeyboard-keys-⇧");
400             i.onclick = function() {
401                 if (!this.isShift) {
402                     i.classList.add("akeyboard-mobileKeyboard-keys-focus"), i.isShift = !0;
403                     const o = document.querySelectorAll(e.el + " .akeyboard-keyboard-innerKeys");
404                     let n;
405                     for (let e = 0; e < o.length; e++) {
406                         n = o[e];
407                         for (let o = 0; o < n.childNodes.length; o++) n.childNodes[o].innerHTML = c[e][o]
408                     }
409                     return
410                 }
411                 i.isShift = !1, i.classList.remove("akeyboard-mobileKeyboard-keys-focus");
412                 const o = document.querySelectorAll(e.el + " .akeyboard-keyboard-innerKeys");
413                 let n;
414                 for (let e = 0; e < o.length; e++) {
415                     n = o[e];
416                     for (let o = 0; o < n.childNodes.length; o++) n.childNodes[o].innerHTML = a[e][o]
417                 }
418             }, i.isShift = !1
419         }
420         inputOn(e, o) {
421             if ("string" != typeof e) return void console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
422             if ("string" != typeof o) return void console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
423             const n = document.querySelector(e),
424                 t = document.querySelectorAll(this.obj.el + " .akeyboard-mobileKeyboard-keys");
425             for (let e = 0; e < t.length; e++) {
426                 switch (t[e].innerHTML) {
427                     case "⇧":
428                         continue;
429                     case "⇦":
430                         t[e].onclick = function() {
431                             n[o] = n[o].substr(0, n[o].length - 1)
432                         };
433                         continue;
434                     case "Enter":
435                         t[e].onclick = function() {
436                             n[o] += "\n"
437                         };
438                         continue;
439                     case "Space":
440                         t[e].onclick = function() {
441                             n[o] += " "
442                         };
443                         continue
444                 }
445                 t[e].onclick = function() {
446                     n[o] += this.innerText
447                 }
448             }
449         }
450         onclick(e, o) {
451             if ("string" != typeof e) return void console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
452             if ("function" != typeof o) return void console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
453             if ("*" === e) {
454                 let e = document.querySelectorAll(this.obj.el + " .akeyboard-mobileKeyboard-keys");
455                 for (let n = 0; n < e.length; n++) e[n].onclick = o;
456                 return
457             }
458             let n = document.querySelector(this.obj.el + " .akeyboard-mobileKeyboard-keys-" + e);
459             null === n && (n = document.querySelector(this.obj.el + " .akeyboard-mobileKeyboard-keys-" + e)), n.onclick = o
460         }
461     }
462 }]);

 

　　　
 
 
 
// akeyboard.css
  1 .akeyboard-keyboard {
  2     height: 260px;
  3     width: 750px;
  4     background: rgba(255, 255, 255,0%);
  5     border-radius: 5px;
  6     padding: 5px;
  7     padding-top: 9px;
  8     box-sizing: border-box;
  9 }
 10 .aui_close_keyboard:before {
 11     content: "\f00d";
 12 }
 13 .aui_close_keyboard {
 14 
 15 
 16     position: absolute;
 17     text-decoration: none;
 18     outline: none;
 19     cursor: pointer;
 20     background: rgba(255, 255, 255,0%);
 21     color: #fff;
 22     border-top: none;
 23     top: 0px;
 24     height: 25px;
 25     width: 25px;
 26     font-size: 18px;
 27     line-height: 25px;
 28     text-align: center;
 29     font-family: FontAwesome;
 30     right: calc((100% - 780px)/2);
 31     top:calc(100% - 260px) ;
 32 }
 33 .aui_close_keyboard:hover{
 34     background-color:#ccc;
 35 }
 36 
 37 
 38 .aui_close_keyboard_explorer:before {
 39     content: "\f00d";
 40 }
 41 .aui_close_keyboard_explorer {
 42 
 43 
 44     position: absolute;
 45     text-decoration: none;
 46     outline: none;
 47     cursor: pointer;
 48     background: rgb(238, 238, 238);
 49     color: #fff;
 50     border-top: none;
 51     top: 0px;
 52     height: 25px;
 53     width: 25px;
 54     font-size: 18px;
 55     line-height: 25px;
 56     text-align: center;
 57     font-family: FontAwesome;
 58     right: calc((100% - 780px)/2);
 59     top:calc(100% - 290px) ;
 60 }
 61 .aui_close_keyboard_explorer:hover{
 62     background-color:#1E9FFF;
 63 }
 64 .akeyboard-keyboard-innerKeys {
 65     text-align: center;
 66 }
 67 
 68 .akeyboard-keyboard-keys {
 69     height: 40px;
 70     width: 40px;
 71     border-radius: 5px;
 72     background: white;
 73     display: inline-block;
 74     line-height: 40px;
 75     text-align: center;
 76     box-sizing: border-box;
 77     margin: 4px;
 78     cursor: pointer;
 79     user-select: none;
 80 }
 81 
 82 .akeyboard-keyboard-keys:hover {
 83     background: #1E9FFF!important;
 84     color: white!important;
 85 }
 86 
 87 .akeyboard-keyboard-keys-Delete {
 88     width: 80px;
 89 }
 90 
 91 .akeyboard-keyboard-keys-Tab {
 92     width: 80px;
 93 }
 94 
 95 .akeyboard-keyboard-keys-Caps {
 96     width: 77px;
 97 }
 98 
 99 .akeyboard-keyboard-keys-Enter {
100     width: 90px;
101 }
102 
103 .akeyboard-keyboard-keys-Shift {
104     width: 106px;
105 }
106 
107 .akeyboard-keyboard-keys-Space {
108     width: 350px;
109 }
110 .akeyboard-keyboard-keys-Exit {
111     position: absolute;
112     top: 1px;
113     right: 1px;
114     width: 20px;
115     height: 20px;
116     line-height: 20px;
117     background-color: #ddd;
118 }
119 
120 .keyboard-keyboard-keys-focus {
121     background: #1E9FFF;
122     color: white;
123 }
124 
125 .akeyboard-keyboard-fixedBottomCenter {
126     width: 100% !important;
127     position: fixed;
128     bottom: 0px;
129     left: 0px;
130     border-radius: 0 !important;
131 }
132 
133 /*
134     number keyboard
135  */
136 .akeyboard-numberKeyboard {
137     height: 260px;
138     width: 180px;
139     background: #f0f0f0;
140     border-radius: 5px;
141     padding: 5px;
142     padding-top: 10px;
143     box-sizing: border-box;
144 }
145 
146 .akeyboard-numberKeyboard-keys-Enter {
147     height: 40px;
148     width: 100px;
149 }
150 
151 /*
152     mobile keyboard
153  */
154 .akeyboard-mobileKeyboard {
155     height: 180px;
156     width: 310px;
157     background: #f0f0f0;
158     border-radius: 5px;
159     padding: 5px;
160     padding-top: 11px;
161     box-sizing: border-box;
162 }
163 
164 .akeyboard-mobileKeyboard-keys {
165     height: 25px;
166     width: 19px;
167     border-radius: 3px;
168     background: white;
169     display: inline-block;
170     line-height: 25px;
171     text-align: center;
172     box-sizing: border-box;
173     margin: 2px;
174     margin-top: 3px;
175     cursor: pointer;
176     user-select: none;
177     font-size: 10px;
178 }
179 
180 .akeyboard-mobileKeyboard-keys:hover {
181     background: #1E9FFF !important;
182     color: white;
183 }
184 
185 .akeyboard-mobileKeyboard-keys-⇧ {
186     width: 25px;
187     background: rgba(153, 159, 175);
188 }
189 
190 .akeyboard-mobileKeyboard-keys-⇦ {
191     width: 25px;
192     background: rgba(153, 159, 175);
193 }
194 
195 .akeyboard-mobileKeyboard-keys-Space {
196     height: 28px;
197     width: 100px;
198     line-height: 28px;
199     margin-left: 55px;
200 }
201 
202 .akeyboard-mobileKeyboard-keys-Enter {
203     height: 28px;
204     width: 55px;
205     line-height: 28px;
206     background: #1E9FFF !important;
207     color: white;
208 }
209 
210 .akeyboard-mobileKeyboard-keys-focus {
211     background: #1E9FFF !important;
212     color: white;
213 }

 

 
posted @ 2024-04-11 16:28  一个小马龙  阅读(558)  评论(0)    收藏  举报