├── .gitignore
├── LICENSE
├── README.md
├── README_CN.md
├── css
    ├── index-classic.css
    ├── index-dark.css
    ├── index-grassGreen.css
    └── index.css
├── img
    ├── classic-mobile.png
    ├── classic-num.png
    ├── classic.png
    ├── dark-mobile.png
    ├── dark-num.png
    ├── dark.png
    ├── default-mobile.png
    ├── default-num.png
    ├── default.png
    ├── grassGreen-mobile.png
    ├── grassGreen-num.png
    └── grassGreen.png
├── index.js
├── indexVue.js
├── package.json
├── src
    ├── index.js
    ├── keyboard.js
    ├── keyboard.mobile.js
    ├── keyboard.number.js
    └── vue
    │   ├── index.vue.js
    │   ├── keyboard.js
    │   └── keyboard.number.js
├── test
    ├── index.html
    ├── index.mobile.html
    ├── index.number.html
    └── vue
    │   ├── index.number.html
    │   └── index.vue.html
├── update.md
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 
3 | .DS_Store
4 | 
5 | npm-debug.log*
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 A-Keyboard
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # A-Keyboard
 2 | A-Keyboard is a small JavaScript virtual keyboard.
 3 | 
 4 | Visit the A-Keyboard Github Demo website to view the online [keyboard](https://18510047382.github.io/A-Keyboard/test/index.html)、[number keyboard](https://18510047382.github.io/A-Keyboard/test/index.number.html)、[mobile keyboard](https://18510047382.github.io/A-Keyboard/test/index.mobile.html) Demo.
 5 | 
 6 | ### Images
 7 | **We have provided you with four default styles: Default, Classic, Dark, and GrassGreen.**
 8 | 
 9 | **Normal Keyboard:**
10 | 
11 | <img src='https://18510047382.github.io/A-Keyboard/img/default.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/classic.png' height='130px'>
12 | 
13 | <img src='https://18510047382.github.io/A-Keyboard/img/dark.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/grassGreen.png' height='130px'>
14 | 
15 | **Number Keyboard:**
16 | 
17 | <img src='https://18510047382.github.io/A-Keyboard/img/default-num.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/classic-num.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/dark-num.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/grassGreen-num.png' height='130px'>
18 | 
19 | **Mobile Keyboard:**
20 | 
21 | <img src='https://18510047382.github.io/A-Keyboard/img/default-mobile.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/classic-mobile.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/dark-mobile.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/grassGreen-mobile.png' height='130px'>
22 | 
23 | ## Wiki
24 | Check out our online documentation at the following URL:
25 | 
26 | - [Github Wiki](https://github.com/18510047382/A-Keyboard/wiki)
27 | - [Gitee Wiki](https://gitee.com/bd999/A-Keyboard/wikis)
28 | 
29 | **Note: When a new version is released, the Wiki Guide on Gitee will be delayed. If you want to access the new version of the document, it is recommended to check the Github Wiki.**
30 | 
31 | ## Release
32 | Our version is released on the following platforms:
33 | 
34 | - [Github](https://github.com/18510047382/A-Keyboard)
35 | - [Gitee 码云](https://gitee.com/bd999/A-Keyboard)
36 | - [NPM](https://www.npmjs.com/package/akeyboard)
37 | 
38 | ## Contributors
39 | |Nickname|Avatar|Nickname|Avatar|
40 | |---|---|---|---|
41 | |[Bd999](https://github.com/18510047382)|<img src='https://avatars0.githubusercontent.com/u/45157599?s=460&v=4' height='50px'>|[YiXTXFRC7095](https://github.com/YiXTXFRC7095)|<img src='https://avatars3.githubusercontent.com/u/44867497?s=460&v=4' height='50px'>|
42 | |[AlexZhou17](https://github.com/AlexZhou17)|<img src='https://avatars3.githubusercontent.com/u/51029002?s=460&v=4' height='50px'>|
43 | 
44 | ## License
45 | [MIT](https://opensource.org/licenses/MIT)
46 | 
47 | Copyright (c) 2019-present, Yingxuan (Bill) Dong
48 | 


--------------------------------------------------------------------------------
/README_CN.md:
--------------------------------------------------------------------------------
 1 | # A-Keyboard
 2 | A-Keyboard是一个小型的 JavaScript 虚拟键盘。
 3 | 
 4 | 访问 A-Keyboard Github Demo 网站查看在线 [键盘](https://18510047382.github.io/A-Keyboard/test/index.html)、[数字键盘](https://18510047382.github.io/A-Keyboard/test/index.number.html)、[手机键盘](https://18510047382.github.io/A-Keyboard/test/index.mobile.html) Demo。
 5 | 
 6 | ### 图片
 7 | **我们为你提供了 Default、Classic、Dark、GrassGreen 这四种默认样式**
 8 | 
 9 | **普通键盘:**
10 | 
11 | <img src='https://18510047382.github.io/A-Keyboard/img/default.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/classic.png' height='130px'>
12 | 
13 | <img src='https://18510047382.github.io/A-Keyboard/img/dark.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/grassGreen.png' height='130px'>
14 | 
15 | **数字键盘:**
16 | 
17 | <img src='https://18510047382.github.io/A-Keyboard/img/default-num.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/classic-num.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/dark-num.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/grassGreen-num.png' height='130px'>
18 | 
19 | **手机键盘:**
20 | 
21 | <img src='https://18510047382.github.io/A-Keyboard/img/default-mobile.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/classic-mobile.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/dark-mobile.png' height='130px'><img src='https://18510047382.github.io/A-Keyboard/img/grassGreen-mobile.png' height='130px'>
22 | 
23 | ## Wiki
24 | 访问以下网址查看我们的在线文档：
25 | 
26 | - [Github Wiki](https://github.com/18510047382/A-Keyboard/wiki)
27 | - [Gitee Wiki](https://gitee.com/bd999/A-Keyboard/wikis)
28 | 
29 | **说明：当有新版本发布时，Gitee 上的 Wiki 指南将会延迟更新，如果你想访问新版本的文档，推荐查看 Github Wiki**
30 | 
31 | ## 发行
32 | 我们的版本目前发行在以下几个平台上：
33 | 
34 | - [Github](https://github.com/18510047382/A-Keyboard)
35 | - [Gitee 码云](https://gitee.com/bd999/A-Keyboard)
36 | - [NPM](https://www.npmjs.com/package/akeyboard)
37 | 
38 | ## 贡献者
39 | |昵称|头像|昵称|头像|
40 | |---|---|---|---|
41 | |[Bd999](https://github.com/18510047382)|<img src='https://avatars0.githubusercontent.com/u/45157599?s=460&v=4' height='50px'>|[YiXTXFRC7095](https://github.com/YiXTXFRC7095)|<img src='https://avatars3.githubusercontent.com/u/44867497?s=460&v=4' height='50px'>|
42 | |[AlexZhou17](https://github.com/AlexZhou17)|<img src='https://avatars3.githubusercontent.com/u/51029002?s=460&v=4' height='50px'>|
43 | 
44 | ## License
45 | [MIT](https://opensource.org/licenses/MIT)
46 | 
47 | Copyright (c) 2019-present, Yingxuan (Bill) Dong
48 | 


--------------------------------------------------------------------------------
/css/index-classic.css:
--------------------------------------------------------------------------------
  1 | .akeyboard-keyboard {
  2 |     height: 260px;
  3 |     width: 750px;
  4 |     background: #2F4056;
  5 |     border-radius: 5px;
  6 |     padding: 5px;
  7 |     padding-top: 9px;
  8 |     box-sizing: border-box;
  9 | }
 10 | 
 11 | .akeyboard-keyboard-innerKeys {
 12 |     text-align: center;
 13 | }
 14 | 
 15 | .akeyboard-keyboard-keys {
 16 |     height: 40px;
 17 |     width: 40px;
 18 |     border-radius: 5px;
 19 |     background: white;
 20 |     display: inline-block;
 21 |     line-height: 40px;
 22 |     text-align: center;
 23 |     box-sizing: border-box;
 24 |     margin: 4px;
 25 |     cursor: pointer;
 26 |     user-select: none;
 27 | }
 28 | 
 29 | .akeyboard-keyboard-keys:hover {
 30 |     background: #c2c2c2;
 31 |     color: white;
 32 | }
 33 | 
 34 | .akeyboard-keyboard-keys-Delete {
 35 |     width: 80px;
 36 | }
 37 | 
 38 | .akeyboard-keyboard-keys-Tab {
 39 |     width: 80px;
 40 | }
 41 | 
 42 | .akeyboard-keyboard-keys-Caps {
 43 |     width: 77px;
 44 | }
 45 | 
 46 | .akeyboard-keyboard-keys-Enter {
 47 |     width: 90px;
 48 | }
 49 | 
 50 | .akeyboard-keyboard-keys-Shift {
 51 |     width: 106px;
 52 | }
 53 | 
 54 | .akeyboard-keyboard-keys-Space {
 55 |     width: 350px;
 56 | }
 57 | 
 58 | .keyboard-keyboard-keys-focus {
 59 |     background: #c2c2c2;
 60 |     color: white;
 61 | }
 62 | 
 63 | .akeyboard-keyboard-fixedBottomCenter {
 64 |     width: 100% !important;
 65 |     position: fixed;
 66 |     bottom: 0px;
 67 |     left: 0px;
 68 |     border-radius: 0 !important;
 69 | }
 70 | 
 71 | /*
 72 |     number keyboard
 73 |  */
 74 | .akeyboard-numberKeyboard {
 75 |     height: 260px;
 76 |     width: 180px;
 77 |     background: #2F4056;
 78 |     border-radius: 5px;
 79 |     padding: 5px;
 80 |     padding-top: 10px;
 81 |     box-sizing: border-box;
 82 | }
 83 | 
 84 | .akeyboard-numberKeyboard-keys-Enter {
 85 |     height: 40px;
 86 |     width: 100px;
 87 | }
 88 | 
 89 | /*
 90 |     mobile keyboard
 91 |  */
 92 | .akeyboard-mobileKeyboard {
 93 |     height: 180px;
 94 |     width: 310px;
 95 |     background: #2F4056;
 96 |     border-radius: 5px;
 97 |     padding: 5px;
 98 |     padding-top: 11px;
 99 |     box-sizing: border-box;
100 | }
101 | 
102 | .akeyboard-mobileKeyboard-keys {
103 |     height: 25px;
104 |     width: 19px;
105 |     border-radius: 3px;
106 |     background: white;
107 |     display: inline-block;
108 |     line-height: 25px;
109 |     text-align: center;
110 |     box-sizing: border-box;
111 |     margin: 2px;
112 |     margin-top: 3px;
113 |     cursor: pointer;
114 |     user-select: none;
115 |     font-size: 10px;
116 | }
117 | 
118 | .akeyboard-mobileKeyboard-keys:hover {
119 |     background: #c2c2c2 !important;
120 |     color: white;
121 | }
122 | 
123 | .akeyboard-mobileKeyboard-keys-⇧ {
124 |     width: 25px;
125 |     background: rgba(153, 159, 175);
126 | }
127 | 
128 | .akeyboard-mobileKeyboard-keys-⇦ {
129 |     width: 25px;
130 |     background: rgba(153, 159, 175);
131 | }
132 | 
133 | .akeyboard-mobileKeyboard-keys-Space {
134 |     height: 28px;
135 |     width: 100px;
136 |     line-height: 28px;
137 |     margin-left: 55px;
138 | }
139 | 
140 | .akeyboard-mobileKeyboard-keys-Enter {
141 |     height: 28px;
142 |     width: 55px;
143 |     line-height: 28px;
144 |     background: #c2c2c2 !important;
145 |     color: white;
146 | }
147 | 
148 | .akeyboard-mobileKeyboard-keys-focus {
149 |     background: #c2c2c2 !important;
150 |     color: white;
151 | }
152 | 


--------------------------------------------------------------------------------
/css/index-dark.css:
--------------------------------------------------------------------------------
  1 | .akeyboard-keyboard {
  2 |     height: 260px;
  3 |     width: 750px;
  4 |     background: black;
  5 |     color: white;
  6 |     border-radius: 5px;
  7 |     padding: 5px;
  8 |     padding-top: 9px;
  9 |     box-sizing: border-box;
 10 | }
 11 | 
 12 | .akeyboard-keyboard-innerKeys {
 13 |     text-align: center;
 14 | }
 15 | 
 16 | .akeyboard-keyboard-keys {
 17 |     height: 40px;
 18 |     width: 40px;
 19 |     border-radius: 5px;
 20 |     background: #393D49;
 21 |     color: white;
 22 |     display: inline-block;
 23 |     line-height: 40px;
 24 |     text-align: center;
 25 |     box-sizing: border-box;
 26 |     margin: 4px;
 27 |     cursor: pointer;
 28 |     user-select: none;
 29 | }
 30 | 
 31 | .akeyboard-keyboard-keys:hover {
 32 |     background: #1E9FFF;
 33 | }
 34 | 
 35 | .akeyboard-keyboard-keys-Delete {
 36 |     width: 80px;
 37 | }
 38 | 
 39 | .akeyboard-keyboard-keys-Tab {
 40 |     width: 80px;
 41 | }
 42 | 
 43 | .akeyboard-keyboard-keys-Caps {
 44 |     width: 77px;
 45 | }
 46 | 
 47 | .akeyboard-keyboard-keys-Enter {
 48 |     width: 90px;
 49 | }
 50 | 
 51 | .akeyboard-keyboard-keys-Shift {
 52 |     width: 106px;
 53 | }
 54 | 
 55 | .akeyboard-keyboard-keys-Space {
 56 |     width: 350px;
 57 | }
 58 | 
 59 | .keyboard-keyboard-keys-focus {
 60 |     background: #1E9FFF;
 61 | }
 62 | 
 63 | .akeyboard-keyboard-fixedBottomCenter {
 64 |     width: 100% !important;
 65 |     position: fixed;
 66 |     bottom: 0px;
 67 |     left: 0px;
 68 |     border-radius: 0 !important;
 69 | }
 70 | 
 71 | /*
 72 |     number keyboard
 73 |  */
 74 | .akeyboard-numberKeyboard {
 75 |     height: 260px;
 76 |     width: 180px;
 77 |     background: black;
 78 |     border-radius: 5px;
 79 |     padding: 5px;
 80 |     padding-top: 10px;
 81 |     box-sizing: border-box;
 82 | }
 83 | 
 84 | .akeyboard-numberKeyboard-keys-Enter {
 85 |     height: 40px;
 86 |     width: 100px;
 87 | }
 88 | 
 89 | /*
 90 |     mobile keyboard
 91 |  */
 92 | .akeyboard-mobileKeyboard {
 93 |     height: 180px;
 94 |     width: 310px;
 95 |     background: black;
 96 |     border-radius: 5px;
 97 |     padding: 5px;
 98 |     padding-top: 11px;
 99 |     box-sizing: border-box;
100 | }
101 | 
102 | .akeyboard-mobileKeyboard-keys {
103 |     height: 25px;
104 |     width: 19px;
105 |     border-radius: 3px;
106 |     background: #393D49;
107 |     color: white;
108 |     display: inline-block;
109 |     line-height: 25px;
110 |     text-align: center;
111 |     box-sizing: border-box;
112 |     margin: 2px;
113 |     margin-top: 3px;
114 |     cursor: pointer;
115 |     user-select: none;
116 |     font-size: 10px;
117 | }
118 | 
119 | .akeyboard-mobileKeyboard-keys:hover {
120 |     background: #1E9FFF !important;
121 |     color: white;
122 | }
123 | 
124 | .akeyboard-mobileKeyboard-keys-⇧ {
125 |     width: 25px;
126 |     background: rgba(153, 159, 175);
127 | }
128 | 
129 | .akeyboard-mobileKeyboard-keys-⇦ {
130 |     width: 25px;
131 |     background: rgba(153, 159, 175);
132 | }
133 | 
134 | .akeyboard-mobileKeyboard-keys-Space {
135 |     height: 28px;
136 |     width: 100px;
137 |     line-height: 28px;
138 |     margin-left: 55px;
139 | }
140 | 
141 | .akeyboard-mobileKeyboard-keys-Enter {
142 |     height: 28px;
143 |     width: 55px;
144 |     line-height: 28px;
145 |     background: #1E9FFF !important;
146 |     color: white;
147 | }
148 | 
149 | .akeyboard-mobileKeyboard-keys-focus {
150 |     background: #1E9FFF !important;
151 |     color: white;
152 | }
153 | 


--------------------------------------------------------------------------------
/css/index-grassGreen.css:
--------------------------------------------------------------------------------
  1 | .akeyboard-keyboard {
  2 |     height: 260px;
  3 |     width: 750px;
  4 |     background: #003300;
  5 |     border-radius: 5px;
  6 |     padding: 5px;
  7 |     padding-top: 9px;
  8 |     box-sizing: border-box;
  9 | }
 10 | 
 11 | .akeyboard-keyboard-innerKeys {
 12 |     text-align: center;
 13 | }
 14 | 
 15 | .akeyboard-keyboard-keys {
 16 |     height: 40px;
 17 |     width: 40px;
 18 |     border-radius: 5px;
 19 |     background: #cccc99;
 20 |     display: inline-block;
 21 |     line-height: 40px;
 22 |     text-align: center;
 23 |     box-sizing: border-box;
 24 |     margin: 4px;
 25 |     cursor: pointer;
 26 |     user-select: none;
 27 | }
 28 | 
 29 | .akeyboard-keyboard-keys:hover {
 30 |     background: #669933;
 31 |     color: white;
 32 | }
 33 | 
 34 | .akeyboard-keyboard-keys-Delete {
 35 |     width: 80px;
 36 | }
 37 | 
 38 | .akeyboard-keyboard-keys-Tab {
 39 |     width: 80px;
 40 | }
 41 | 
 42 | .akeyboard-keyboard-keys-Caps {
 43 |     width: 77px;
 44 | }
 45 | 
 46 | .akeyboard-keyboard-keys-Enter {
 47 |     width: 90px;
 48 | }
 49 | 
 50 | .akeyboard-keyboard-keys-Shift {
 51 |     width: 106px;
 52 | }
 53 | 
 54 | .akeyboard-keyboard-keys-Space {
 55 |     width: 350px;
 56 | }
 57 | 
 58 | .keyboard-keyboard-keys-focus {
 59 |     background: #669933;
 60 |     color: white;
 61 | }
 62 | 
 63 | .akeyboard-keyboard-fixedBottomCenter {
 64 |     width: 100% !important;
 65 |     position: fixed;
 66 |     bottom: 0px;
 67 |     left: 0px;
 68 |     border-radius: 0 !important;
 69 | }
 70 | 
 71 | /*
 72 |     number keyboard
 73 |  */
 74 | .akeyboard-numberKeyboard {
 75 |     height: 260px;
 76 |     width: 180px;
 77 |     background: #003300;
 78 |     border-radius: 5px;
 79 |     padding: 5px;
 80 |     padding-top: 10px;
 81 |     box-sizing: border-box;
 82 | }
 83 | 
 84 | .akeyboard-numberKeyboard-keys-Enter {
 85 |     height: 40px;
 86 |     width: 100px;
 87 | }
 88 | 
 89 | /*
 90 |     mobile keyboard
 91 |  */
 92 | .akeyboard-mobileKeyboard {
 93 |     height: 180px;
 94 |     width: 310px;
 95 |     background: #003300;
 96 |     border-radius: 5px;
 97 |     padding: 5px;
 98 |     padding-top: 11px;
 99 |     box-sizing: border-box;
100 | }
101 | 
102 | .akeyboard-mobileKeyboard-keys {
103 |     height: 25px;
104 |     width: 19px;
105 |     border-radius: 3px;
106 |     background: #cccc99;
107 |     display: inline-block;
108 |     line-height: 25px;
109 |     text-align: center;
110 |     box-sizing: border-box;
111 |     margin: 2px;
112 |     margin-top: 3px;
113 |     cursor: pointer;
114 |     user-select: none;
115 |     font-size: 10px;
116 | }
117 | 
118 | .akeyboard-mobileKeyboard-keys:hover {
119 |     background: #669933 !important;
120 |     color: white;
121 | }
122 | 
123 | .akeyboard-mobileKeyboard-keys-⇧ {
124 |     width: 25px;
125 |     background: rgba(153, 159, 175);
126 | }
127 | 
128 | .akeyboard-mobileKeyboard-keys-⇦ {
129 |     width: 25px;
130 |     background: rgba(153, 159, 175);
131 | }
132 | 
133 | .akeyboard-mobileKeyboard-keys-Space {
134 |     height: 28px;
135 |     width: 100px;
136 |     line-height: 28px;
137 |     margin-left: 55px;
138 | }
139 | 
140 | .akeyboard-mobileKeyboard-keys-Enter {
141 |     height: 28px;
142 |     width: 55px;
143 |     line-height: 28px;
144 |     background: #669933 !important;
145 |     color: white;
146 | }
147 | 
148 | .akeyboard-mobileKeyboard-keys-focus {
149 |     background: #669933 !important;
150 |     color: white;
151 | }
152 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | .akeyboard-keyboard {
  2 |     height: 260px;
  3 |     width: 750px;
  4 |     background: #f0f0f0;
  5 |     border-radius: 5px;
  6 |     padding: 5px;
  7 |     padding-top: 9px;
  8 |     box-sizing: border-box;
  9 | }
 10 | 
 11 | .akeyboard-keyboard-innerKeys {
 12 |     text-align: center;
 13 | }
 14 | 
 15 | .akeyboard-keyboard-keys {
 16 |     height: 40px;
 17 |     width: 40px;
 18 |     border-radius: 5px;
 19 |     background: white;
 20 |     display: inline-block;
 21 |     line-height: 40px;
 22 |     text-align: center;
 23 |     box-sizing: border-box;
 24 |     margin: 4px;
 25 |     cursor: pointer;
 26 |     user-select: none;
 27 | }
 28 | 
 29 | .akeyboard-keyboard-keys:hover {
 30 |     background: #1E9FFF;
 31 |     color: white;
 32 | }
 33 | 
 34 | .akeyboard-keyboard-keys-Delete {
 35 |     width: 80px;
 36 | }
 37 | 
 38 | .akeyboard-keyboard-keys-Tab {
 39 |     width: 80px;
 40 | }
 41 | 
 42 | .akeyboard-keyboard-keys-Caps {
 43 |     width: 77px;
 44 | }
 45 | 
 46 | .akeyboard-keyboard-keys-Enter {
 47 |     width: 90px;
 48 | }
 49 | 
 50 | .akeyboard-keyboard-keys-Shift {
 51 |     width: 106px;
 52 | }
 53 | 
 54 | .akeyboard-keyboard-keys-Space {
 55 |     width: 350px;
 56 | }
 57 | 
 58 | .keyboard-keyboard-keys-focus {
 59 |     background: #1E9FFF;
 60 |     color: white;
 61 | }
 62 | 
 63 | .akeyboard-keyboard-fixedBottomCenter {
 64 |     width: 100% !important;
 65 |     position: fixed;
 66 |     bottom: 0px;
 67 |     left: 0px;
 68 |     border-radius: 0 !important;
 69 | }
 70 | 
 71 | /*
 72 |     number keyboard
 73 |  */
 74 | .akeyboard-numberKeyboard {
 75 |     height: 260px;
 76 |     width: 180px;
 77 |     background: #f0f0f0;
 78 |     border-radius: 5px;
 79 |     padding: 5px;
 80 |     padding-top: 10px;
 81 |     box-sizing: border-box;
 82 | }
 83 | 
 84 | .akeyboard-numberKeyboard-keys-Enter {
 85 |     height: 40px;
 86 |     width: 100px;
 87 | }
 88 | 
 89 | /*
 90 |     mobile keyboard
 91 |  */
 92 | .akeyboard-mobileKeyboard {
 93 |     height: 180px;
 94 |     width: 310px;
 95 |     background: #f0f0f0;
 96 |     border-radius: 5px;
 97 |     padding: 5px;
 98 |     padding-top: 11px;
 99 |     box-sizing: border-box;
100 | }
101 | 
102 | .akeyboard-mobileKeyboard-keys {
103 |     height: 25px;
104 |     width: 19px;
105 |     border-radius: 3px;
106 |     background: white;
107 |     display: inline-block;
108 |     line-height: 25px;
109 |     text-align: center;
110 |     box-sizing: border-box;
111 |     margin: 2px;
112 |     margin-top: 3px;
113 |     cursor: pointer;
114 |     user-select: none;
115 |     font-size: 10px;
116 | }
117 | 
118 | .akeyboard-mobileKeyboard-keys:hover {
119 |     background: #1E9FFF !important;
120 |     color: white;
121 | }
122 | 
123 | .akeyboard-mobileKeyboard-keys-⇧ {
124 |     width: 25px;
125 |     background: rgba(153, 159, 175);
126 | }
127 | 
128 | .akeyboard-mobileKeyboard-keys-⇦ {
129 |     width: 25px;
130 |     background: rgba(153, 159, 175);
131 | }
132 | 
133 | .akeyboard-mobileKeyboard-keys-Space {
134 |     height: 28px;
135 |     width: 100px;
136 |     line-height: 28px;
137 |     margin-left: 55px;
138 | }
139 | 
140 | .akeyboard-mobileKeyboard-keys-Enter {
141 |     height: 28px;
142 |     width: 55px;
143 |     line-height: 28px;
144 |     background: #1E9FFF !important;
145 |     color: white;
146 | }
147 | 
148 | .akeyboard-mobileKeyboard-keys-focus {
149 |     background: #1E9FFF !important;
150 |     color: white;
151 | }
152 | 


--------------------------------------------------------------------------------
/img/classic-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/classic-mobile.png


--------------------------------------------------------------------------------
/img/classic-num.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/classic-num.png


--------------------------------------------------------------------------------
/img/classic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/classic.png


--------------------------------------------------------------------------------
/img/dark-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/dark-mobile.png


--------------------------------------------------------------------------------
/img/dark-num.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/dark-num.png


--------------------------------------------------------------------------------
/img/dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/dark.png


--------------------------------------------------------------------------------
/img/default-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/default-mobile.png


--------------------------------------------------------------------------------
/img/default-num.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/default-num.png


--------------------------------------------------------------------------------
/img/default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/default.png


--------------------------------------------------------------------------------
/img/grassGreen-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/grassGreen-mobile.png


--------------------------------------------------------------------------------
/img/grassGreen-num.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/grassGreen-num.png


--------------------------------------------------------------------------------
/img/grassGreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billdong9/A-Keyboard/536f9eebb194ba471ad60485a6a9620047472897/img/grassGreen.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | !function(e){var o={};function n(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=o,n.d=function(e,o,t){n.o(e,o)||Object.defineProperty(e,o,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,o){if(1&o&&(e=n(e)),8&o)return e;if(4&o&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&o&&"string"!=typeof e)for(var r in e)n.d(t,r,function(o){return e[o]}.bind(null,r));return t},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},n.p="",n(n.s=0)}([function(e,o,n){const t=n(1),r=n(2),a=n(3);window.aKeyboard={keyboard:t,numberKeyboard:r,mobileKeyboard:a}},function(e,o){e.exports=class{constructor(e){if("object"!=typeof e)return void console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');this.obj=e;const o=document.querySelector(e.el);let n="";if("object"==typeof e.style)for(let o in e.style)n+=o+": "+e.style[o]+";";let t='<div class="akeyboard-keyboard'+(e.fixedBottomCenter?" akeyboard-keyboard-fixedBottomCenter":"")+'" style="'+n+'">',r=[];for(let e=1;e<10;e++)r.push(e.toString());r.push("0");const a=[["`"].concat(r).concat(["-","=","Delete"]),["Tab","q","w","e","r","t","y","u","i","o","p","[","]","\\"],["Caps","a","s","d","f","g","h","j","k","l",";","'","Enter"],["Shift","z","x","c","v","b","n","m",",",".","/","Shift"],["Space"]];let s;const c=[],i=[];for(let e=0;e<a.length;e++){c.push([]),i.push([]),s=a[e];for(let o=0;o<s.length;o++)if(1!==s[o].length)c[e].push(s[o]),i[e].push(s[o]);else{switch(i[e].push(s[o].toUpperCase()),s[o]){case"`":c[e].push("~");continue;case"1":c[e].push("!");continue;case"2":c[e].push("@");continue;case"3":c[e].push("#");continue;case"4":c[e].push("$");continue;case"5":c[e].push("%");continue;case"6":c[e].push("^");continue;case"7":c[e].push("&");continue;case"8":c[e].push("*");continue;case"9":c[e].push("(");continue;case"0":c[e].push(")");continue;case"-":c[e].push("_");continue;case"=":c[e].push("+");continue;case"[":c[e].push("{");continue;case"]":c[e].push("}");continue;case"\\":c[e].push("|");continue;case";":c[e].push(":");continue;case"'":c[e].push('"');continue;case",":c[e].push("<");continue;case".":c[e].push(">");continue;case"/":c[e].push("?");continue}c[e].push(s[o].toUpperCase())}}for(let e=0;e<a.length;e++){s=a[e],t+='<div class="akeyboard-keyboard-innerKeys">';for(let e=0;e<s.length;e++)t+='<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-'+s[e]+'">'+s[e]+"</div>";t+="</div>"}t+="</div>",o.innerHTML=t;const l=document.querySelectorAll(e.el+" .akeyboard-keyboard-keys-Shift");function d(){if(!this.isShift){if(document.querySelector(e.el+" .akeyboard-keyboard-keys-Caps").isCaps)return;l[0].isShift=!0,l[1].isShift=!0,l[0].innerHTML="SHIFT",l[1].innerHTML="SHIFT";const o=document.querySelectorAll(e.el+" .akeyboard-keyboard-innerKeys");let n;for(let e=0;e<o.length;e++){n=o[e];for(let o=0;o<n.childNodes.length;o++)"Shift"!==c[e][o]&&(n.childNodes[o].innerHTML=c[e][o])}return}l[0].isShift=!1,l[1].isShift=!1,l[0].innerHTML="Shift",l[1].innerHTML="Shift";const o=document.querySelectorAll(e.el+" .akeyboard-keyboard-innerKeys");let n;for(let e=0;e<o.length;e++){n=o[e];for(let o=0;o<n.childNodes.length;o++)n.childNodes[o].innerHTML=a[e][o]}}l[0].onclick=d,l[0].isShift=!1,l[1].onclick=d,l[1].isShift=!1;const u=document.querySelector(e.el+" .akeyboard-keyboard-keys-Caps");u.onclick=function(){if(!this.isCaps){if(document.querySelector(e.el+" .akeyboard-keyboard-keys-Shift").isShift)return;this.isCaps=!0,this.classList.add("keyboard-keyboard-keys-focus");const o=document.querySelectorAll(e.el+" .akeyboard-keyboard-innerKeys");let n;for(let e=0;e<o.length;e++){n=o[e];for(let o=0;o<n.childNodes.length;o++)n.childNodes[o].innerHTML=i[e][o]}return}this.isCaps=!1,this.classList.remove("keyboard-keyboard-keys-focus");const o=document.querySelectorAll(e.el+" .akeyboard-keyboard-innerKeys");let n;for(let e=0;e<o.length;e++){n=o[e];for(let o=0;o<n.childNodes.length;o++)n.childNodes[o].innerHTML=a[e][o]}},u.isCaps=!1}inputOn(e,o){if("string"!=typeof e)return void console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');if("string"!=typeof o)return void console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');const n=document.querySelector(e),t=document.querySelectorAll(this.obj.el+" .akeyboard-keyboard-keys");for(let e=0;e<t.length;e++){switch(t[e].innerHTML){case"Shift":case"Caps":continue;case"Delete":t[e].onclick=function(){n[o]=n[o].substr(0,n[o].length-1)};continue;case"Tab":t[e].onclick=function(){n[o]+="  "};continue;case"Enter":t[e].onclick=function(){n[o]+="\n"};continue;case"Space":t[e].onclick=function(){n[o]+=" "};continue}t[e].onclick=function(){n[o]+=this.innerText}}}onclick(e,o){if("string"!=typeof e)return void console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');if("function"!=typeof o)return void console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');if("*"===e){let e=document.querySelectorAll(this.obj.el+" .akeyboard-keyboard-keys");for(let n=0;n<e.length;n++)e[n].onclick=o;return}document.querySelector(this.obj.el+" .akeyboard-keyboard-keys-"+e).onclick=o}}},function(e,o){e.exports=class{constructor(e){if("object"!=typeof e)return void console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');this.obj=e;const o=document.querySelector(e.el);let n="";if("object"==typeof e.style)for(let o in e.style)n+=o+": "+e.style[o]+";";let t='<div class="akeyboard-numberKeyboard'+(e.fixedBottomCenter?" akeyboard-keyboard-fixedBottomCenter":"")+'" style="'+n+'">';t+='<div class="akeyboard-keyboard-innerKeys">';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">');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}inputOn(e,o){if("string"!=typeof e)return void console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');if("string"!=typeof o)return void console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');const n=document.querySelector(e),t=document.querySelectorAll(this.obj.el+" .akeyboard-keyboard-keys");for(let e=0;e<t.length;e++)"Delete"!==t[e].innerHTML?"Enter"!==t[e].innerHTML?t[e].onclick=function(){n[o]+=this.innerText}:t[e].onclick=function(){n[o]+="\n"}:t[e].onclick=function(){n[o]=n[o].substr(0,n[o].length-1)}}onclick(e,o){if("string"!=typeof e)return void console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');if("function"!=typeof o)return void console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');if("*"===e){let e=document.querySelectorAll(this.obj.el+" .akeyboard-numberKeyboard-keys");for(let n=0;n<e.length;n++)e[n].onclick=o;return}document.querySelector(this.obj.el+" .akeyboard-numberKeyboard-keys-"+e).onclick=o}}},function(e,o){e.exports=class{constructor(e){if("object"!=typeof e)return void console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');this.obj=e;const o=document.querySelector(e.el);let n="";if("object"==typeof e.style)for(let o in e.style)n+=o+": "+e.style[o]+";";let t='<div class="akeyboard-mobileKeyboard'+(e.fixedBottomCenter?" akeyboard-keyboard-fixedBottomCenter":"")+'" style="'+n+'">',r=[];for(let e=1;e<10;e++)r.push(e.toString());r.push("0");const a=[["`"].concat(r).concat(["-","="]),["q","w","e","r","t","y","u","i","o","p","[","]","\\"],["a","s","d","f","g","h","j","k","l",";","'"],["⇧","z","x","c","v","b","n","m",",",".","/","⇦"],["Space","Enter"]];let s;const c=[];for(let e=0;e<a.length;e++){c.push([]),s=a[e];for(let o=0;o<s.length;o++)if(1!==s[o].length)c[e].push(s[o]);else{switch(s[o]){case"`":c[e].push("~");continue;case"1":c[e].push("!");continue;case"2":c[e].push("@");continue;case"3":c[e].push("#");continue;case"4":c[e].push("$");continue;case"5":c[e].push("%");continue;case"6":c[e].push("^");continue;case"7":c[e].push("&");continue;case"8":c[e].push("*");continue;case"9":c[e].push("(");continue;case"0":c[e].push(")");continue;case"-":c[e].push("_");continue;case"=":c[e].push("+");continue;case"[":c[e].push("{");continue;case"]":c[e].push("}");continue;case"\\":c[e].push("|");continue;case";":c[e].push(":");continue;case"'":c[e].push('"');continue;case",":c[e].push("<");continue;case".":c[e].push(">");continue;case"/":c[e].push("?");continue}c[e].push(s[o].toUpperCase())}}for(let e=0;e<a.length;e++){s=a[e],t+='<div class="akeyboard-keyboard-innerKeys">';for(let e=0;e<s.length;e++)t+='<div class="akeyboard-mobileKeyboard-keys akeyboard-mobileKeyboard-keys-'+s[e]+'">'+s[e]+"</div>";t+="</div>"}t+="</div>",o.innerHTML=t;const i=document.querySelector(e.el+" .akeyboard-mobileKeyboard-keys-⇧");i.onclick=function(){if(!this.isShift){i.classList.add("akeyboard-mobileKeyboard-keys-focus"),i.isShift=!0;const o=document.querySelectorAll(e.el+" .akeyboard-keyboard-innerKeys");let n;for(let e=0;e<o.length;e++){n=o[e];for(let o=0;o<n.childNodes.length;o++)n.childNodes[o].innerHTML=c[e][o]}return}i.isShift=!1,i.classList.remove("akeyboard-mobileKeyboard-keys-focus");const o=document.querySelectorAll(e.el+" .akeyboard-keyboard-innerKeys");let n;for(let e=0;e<o.length;e++){n=o[e];for(let o=0;o<n.childNodes.length;o++)n.childNodes[o].innerHTML=a[e][o]}},i.isShift=!1}inputOn(e,o){if("string"!=typeof e)return void console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');if("string"!=typeof o)return void console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');const n=document.querySelector(e),t=document.querySelectorAll(this.obj.el+" .akeyboard-mobileKeyboard-keys");for(let e=0;e<t.length;e++){switch(t[e].innerHTML){case"⇧":continue;case"⇦":t[e].onclick=function(){n[o]=n[o].substr(0,n[o].length-1)};continue;case"Enter":t[e].onclick=function(){n[o]+="\n"};continue;case"Space":t[e].onclick=function(){n[o]+=" "};continue}t[e].onclick=function(){n[o]+=this.innerText}}}onclick(e,o){if("string"!=typeof e)return void console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');if("function"!=typeof o)return void console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');if("*"===e){let e=document.querySelectorAll(this.obj.el+" .akeyboard-mobileKeyboard-keys");for(let n=0;n<e.length;n++)e[n].onclick=o;return}let n=document.querySelector(this.obj.el+" .akeyboard-mobileKeyboard-keys-"+e);null===n&&(n=document.querySelector(this.obj.el+" .akeyboard-mobileKeyboard-keys-"+e)),n.onclick=o}}}]);


--------------------------------------------------------------------------------
/indexVue.js:
--------------------------------------------------------------------------------
1 | !function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([,,,,function(e,t,n){const i=n(5),s=n(6);window.aKeyboardVue={keyboard:i,numberKeyboard:s}},function(e,t){e.exports={props:{fixedBottomCenter:Boolean,inputOn:Object,onclick:Object},template:'\n        <div :class="{\'akeyboard-keyboard\': true, \'akeyboard-keyboard-fixedBottomCenter\': fixedBottomCenter}">\n            <div v-for="row of keys" class="akeyboard-keyboard-innerKeys">\n                <div v-for="key in row" :class="[\'akeyboard-keyboard-keys\', \'akeyboard-keyboard-keys-\' + key]" @click="handleClick(key)">\n                    <span v-if="key === \'Shift\' && isShift">SHIFT</span>\n                    <span v-else>{{ key }}</span>\n                </div>\n            </div>\n        </div>\n    ',data(){let e=[];for(let t=1;t<10;t++)e.push(t.toString());e.push("0");const t=[["`"].concat(e).concat(["-","=","Delete"]),["Tab","q","w","e","r","t","y","u","i","o","p","[","]","\\"],["Caps","a","s","d","f","g","h","j","k","l",";","'","Enter"],["Shift","z","x","c","v","b","n","m",",",".","/","Shift"],["Space"]];let n;const i=[],s=[];for(let e=0;e<t.length;e++){i.push([]),s.push([]),n=t[e];for(let t=0;t<n.length;t++)if(1!==n[t].length)i[e].push(n[t]),s[e].push(n[t]);else{switch(s[e].push(n[t].toUpperCase()),n[t]){case"`":i[e].push("~");continue;case"1":i[e].push("!");continue;case"2":i[e].push("@");continue;case"3":i[e].push("#");continue;case"4":i[e].push("$");continue;case"5":i[e].push("%");continue;case"6":i[e].push("^");continue;case"7":i[e].push("&");continue;case"8":i[e].push("*");continue;case"9":i[e].push("(");continue;case"0":i[e].push(")");continue;case"-":i[e].push("_");continue;case"=":i[e].push("+");continue;case"[":i[e].push("{");continue;case"]":i[e].push("}");continue;case"\\":i[e].push("|");continue;case";":i[e].push(":");continue;case"'":i[e].push('"');continue;case",":i[e].push("<");continue;case".":i[e].push(">");continue;case"/":i[e].push("?");continue}i[e].push(n[t].toUpperCase())}}return{keys:t,key:JSON.parse(JSON.stringify(t)),shiftKey:i,capsKey:s,isShift:!1,isCaps:!1}},methods:{handleClick(e){if(this.onclick&&this.onclick["*"])return void this.onclick["*"].bind(this)();if(this.onclick&&this.onclick[e])return void this.onclick[e].bind(this)();const t=document.querySelector(this.inputOn.inputEl);if("Shift"===e){if(this.isCaps)return;return this.isShift?(this.isShift=!1,void(this.keys=JSON.parse(JSON.stringify(this.key)))):(this.isShift=!0,void(this.keys=JSON.parse(JSON.stringify(this.shiftKey))))}if("Caps"===e){if(this.isShift)return;return this.isCaps?(this.isCaps=!1,void(this.keys=JSON.parse(JSON.stringify(this.key)))):(this.isCaps=!0,void(this.keys=JSON.parse(JSON.stringify(this.capsKey))))}if(this.inputOn){switch(e){case"Delete":return void(t[this.inputOn.inputType]=t[this.inputOn.inputType].substr(0,t[this.inputOn.inputType].length-1));case"Tab":return void(t[this.inputOn.inputType]+="  ");case"Enter":return void(t[this.inputOn.inputType]+="\n");case"Space":return void(t[this.inputOn.inputType]+=" ")}t[this.inputOn.inputType]+=e}}}}},function(e,t){e.exports={props:{fixedBottomCenter:Boolean,inputOn:Object,onclick:Object},template:'\n        <div :class="{\'akeyboard-numberKeyboard\': true, \'akeyboard-keyboard-fixedBottomCenter\': fixedBottomCenter}">\n            <div v-for="row of keys" class="akeyboard-keyboard-innerKeys">\n                <div v-for="key in row" :class="[\'akeyboard-keyboard-keys\', \'akeyboard-numberKeyboard-keys\', \'akeyboard-keyboard-keys-\' + key]" @click="handleClick(key)">\n                    {{ key }}\n                </div>\n            </div>\n        </div>\n    ',data(){const e=[];let t=[];for(let n=1;n<10;n++)t.push(n),n%3==0&&(e.push(t),t=[]);return e.push([0,"Delete"],["Enter"]),{keys:e}},methods:{handleClick(e){if(this.onclick&&this.onclick["*"])return void this.onclick["*"].bind(this)();if(this.onclick&&this.onclick[e])return void this.onclick[e].bind(this)();const t=document.querySelector(this.inputOn.inputEl);if(this.inputOn){switch(e){case"Delete":return void(t[this.inputOn.inputType]=t[this.inputOn.inputType].substr(0,t[this.inputOn.inputType].length-1));case"Enter":return void(t[this.inputOn.inputType]+="\n")}t[this.inputOn.inputType]+=e}}}}}]);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "akeyboard",
 3 |     "version": "1.0.0",
 4 |     "description": "javascript keyboard",
 5 |     "main": "index.js",
 6 |     "scripts": {
 7 |         "test": "echo \"Error: no test specified\" && exit 1"
 8 |     },
 9 |     "keywords": [
10 |         "keyboard",
11 |         "js-keyboard",
12 |         "javascript-keyboard"
13 |     ],
14 |     "author": "Bill Dong",
15 |     "license": "MIT"
16 | }
17 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | const keyboard = require('./keyboard'),
 2 |     numberKeyboard = require('./keyboard.number'),
 3 |     mobileKeyboard = require('./keyboard.mobile');
 4 | 
 5 | window.aKeyboard = {
 6 |     keyboard,
 7 |     numberKeyboard,
 8 |     mobileKeyboard
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/keyboard.js:
--------------------------------------------------------------------------------
  1 | class Keyboard {
  2 |     constructor(obj) {
  3 |         if (typeof obj !== 'object') {
  4 |             console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
  5 |             return;
  6 |         }
  7 | 
  8 |         this.obj = obj;
  9 | 
 10 |         const el = document.querySelector(obj.el);
 11 | 
 12 |         let keyboardStyle = '';
 13 |         if (typeof obj.style === 'object') {
 14 |             for (let i in obj.style) {
 15 |                 keyboardStyle += i + ': ' + obj.style[i] + ';';
 16 |             }
 17 |         }
 18 | 
 19 |         let html = '<div class="akeyboard-keyboard' + (obj.fixedBottomCenter ? ' akeyboard-keyboard-fixedBottomCenter' : '') + '" style="' + keyboardStyle + '">';
 20 | 
 21 |         //init keys
 22 |         let numberKeys = [];
 23 |         for (let i = 1; i < 10; i++) {
 24 |             numberKeys.push(i.toString());
 25 |         }
 26 |         numberKeys.push('0');
 27 | 
 28 |         const keys = [
 29 |             ['`'].concat(numberKeys).concat([
 30 |                 '-', '=', 'Delete'
 31 |             ]),
 32 |             ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
 33 |             ['Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
 34 |             ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
 35 |             ['Space']
 36 |         ]
 37 | 
 38 |         let thisKeys;
 39 |         const shiftKey = [],
 40 |             capsKey = [];
 41 |         for (let i = 0; i < keys.length; i++) {
 42 |             shiftKey.push([]);
 43 |             capsKey.push([]);
 44 |             thisKeys = keys[i];
 45 |             for (let a = 0; a < thisKeys.length; a++) {
 46 |                 if (thisKeys[a].length === 1) {
 47 |                     capsKey[i].push(thisKeys[a].toUpperCase());
 48 |                     switch (thisKeys[a]) {
 49 |                         case '`':
 50 |                             shiftKey[i].push('~');
 51 |                             continue;
 52 |                         case '1':
 53 |                             shiftKey[i].push('!');
 54 |                             continue;
 55 |                         case '2':
 56 |                             shiftKey[i].push('@');
 57 |                             continue;
 58 |                         case '3':
 59 |                             shiftKey[i].push('#');
 60 |                             continue;
 61 |                         case '4':
 62 |                             shiftKey[i].push('$');
 63 |                             continue;
 64 |                         case '5':
 65 |                             shiftKey[i].push('%');
 66 |                             continue;
 67 |                         case '6':
 68 |                             shiftKey[i].push('^');
 69 |                             continue;
 70 |                         case '7':
 71 |                             shiftKey[i].push('&');
 72 |                             continue;
 73 |                         case '8':
 74 |                             shiftKey[i].push('*');
 75 |                             continue;
 76 |                         case '9':
 77 |                             shiftKey[i].push('(');
 78 |                             continue;
 79 |                         case '0':
 80 |                             shiftKey[i].push(')');
 81 |                             continue;
 82 |                         case '-':
 83 |                             shiftKey[i].push('_');
 84 |                             continue;
 85 |                         case '=':
 86 |                             shiftKey[i].push('+');
 87 |                             continue;
 88 |                         case '[':
 89 |                             shiftKey[i].push('{');
 90 |                             continue;
 91 |                         case ']':
 92 |                             shiftKey[i].push('}');
 93 |                             continue;
 94 |                         case '\\':
 95 |                             shiftKey[i].push('|');
 96 |                             continue;
 97 |                         case ';':
 98 |                             shiftKey[i].push(':');
 99 |                             continue;
100 |                         case '\'':
101 |                             shiftKey[i].push('"');
102 |                             continue;
103 |                         case ',':
104 |                             shiftKey[i].push('<');
105 |                             continue;
106 |                         case '.':
107 |                             shiftKey[i].push('>');
108 |                             continue;
109 |                         case '/':
110 |                             shiftKey[i].push('?');
111 |                             continue;
112 |                     }
113 |                     shiftKey[i].push(thisKeys[a].toUpperCase());
114 |                     continue;
115 |                 }
116 |                 shiftKey[i].push(thisKeys[a]);
117 |                 capsKey[i].push(thisKeys[a]);
118 |             }
119 |         }
120 | 
121 |         for (let i = 0; i < keys.length; i++) {
122 |             thisKeys = keys[i];
123 |             html += '<div class="akeyboard-keyboard-innerKeys">';
124 |             for (let a = 0; a < thisKeys.length; a++) {
125 |                 html += '<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-' + thisKeys[a] + '">' + thisKeys[a] + '</div>';
126 |             }
127 |             html += '</div>';
128 |         }
129 | 
130 |         html += '</div>';
131 | 
132 |         el.innerHTML = html;
133 | 
134 |         //bind the shift and caps key
135 |         const elKeysEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-keys-Shift');
136 | 
137 |         function shiftKeyClickFn() {
138 |             if (!this.isShift) {
139 |                 if (document.querySelector(obj.el + ' .akeyboard-keyboard-keys-Caps').isCaps) {
140 |                     return;
141 |                 }
142 | 
143 |                 //shift
144 |                 elKeysEl[0].isShift = true;
145 |                 elKeysEl[1].isShift = true;
146 |                 elKeysEl[0].innerHTML = 'SHIFT';
147 |                 elKeysEl[1].innerHTML = 'SHIFT';
148 | 
149 |                 const keysInnerEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-innerKeys');
150 | 
151 |                 let thisEl;
152 |                 for (let i = 0; i < keysInnerEl.length; i++) {
153 |                     thisEl = keysInnerEl[i];
154 |                     for (let a = 0; a < thisEl.childNodes.length; a++) {
155 |                         if (shiftKey[i][a] === 'Shift') {
156 |                             continue;
157 |                         }
158 |                         thisEl.childNodes[a].innerHTML = shiftKey[i][a];
159 |                     }
160 |                 }
161 | 
162 |                 return;
163 |             }
164 |             elKeysEl[0].isShift = false;
165 |             elKeysEl[1].isShift = false;
166 |             elKeysEl[0].innerHTML = 'Shift';
167 |             elKeysEl[1].innerHTML = 'Shift';
168 | 
169 |             const keysInnerEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-innerKeys');
170 | 
171 |             let thisEl;
172 |             for (let i = 0; i < keysInnerEl.length; i++) {
173 |                 thisEl = keysInnerEl[i];
174 |                 for (let a = 0; a < thisEl.childNodes.length; a++) {
175 |                     thisEl.childNodes[a].innerHTML = keys[i][a];
176 |                 }
177 |             }
178 |         }
179 | 
180 |         elKeysEl[0].onclick = shiftKeyClickFn;
181 |         elKeysEl[0].isShift = false;
182 | 
183 |         elKeysEl[1].onclick = shiftKeyClickFn;
184 |         elKeysEl[1].isShift = false;
185 | 
186 | 
187 |         const elCapsEl = document.querySelector(obj.el + ' .akeyboard-keyboard-keys-Caps');
188 | 
189 |         elCapsEl.onclick = function() {
190 |             if (!this.isCaps) {
191 |                 if (document.querySelector(obj.el + ' .akeyboard-keyboard-keys-Shift').isShift) {
192 |                     return;
193 |                 }
194 | 
195 |                 //caps
196 |                 this.isCaps = true;
197 |                 this.classList.add('keyboard-keyboard-keys-focus');
198 | 
199 |                 const keysInnerEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-innerKeys');
200 | 
201 |                 let thisEl;
202 |                 for (let i = 0; i < keysInnerEl.length; i++) {
203 |                     thisEl = keysInnerEl[i];
204 |                     for (let a = 0; a < thisEl.childNodes.length; a++) {
205 |                         thisEl.childNodes[a].innerHTML = capsKey[i][a];
206 |                     }
207 |                 }
208 | 
209 |                 return;
210 |             }
211 | 
212 |             this.isCaps = false;
213 |             this.classList.remove('keyboard-keyboard-keys-focus');
214 | 
215 |             const keysInnerEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-innerKeys');
216 | 
217 |             let thisEl;
218 |             for (let i = 0; i < keysInnerEl.length; i++) {
219 |                 thisEl = keysInnerEl[i];
220 |                 for (let a = 0; a < thisEl.childNodes.length; a++) {
221 |                     thisEl.childNodes[a].innerHTML = keys[i][a];
222 |                 }
223 |             }
224 |         }
225 | 
226 |         elCapsEl.isCaps = false;
227 |     }
228 | 
229 |     inputOn(inputEle, type) {
230 |         if (typeof inputEle !== 'string') {
231 |             console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
232 |             return;
233 |         }
234 | 
235 |         if (typeof type !== 'string') {
236 |             console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
237 |             return;
238 |         }
239 | 
240 |         const inputEl = document.querySelector(inputEle),
241 |             elKeysEl = document.querySelectorAll(this.obj.el + ' .akeyboard-keyboard-keys');
242 | 
243 |         for (let i = 0; i < elKeysEl.length; i++) {
244 |             switch (elKeysEl[i].innerHTML) {
245 |                 case 'Shift':
246 |                 case 'Caps':
247 |                     continue;
248 | 
249 |                 case 'Delete':
250 |                     elKeysEl[i].onclick = function() {
251 |                         inputEl[type] = inputEl[type].substr(0, inputEl[type].length - 1);
252 |                     }
253 |                     continue;
254 | 
255 |                 case 'Tab':
256 |                     elKeysEl[i].onclick = function() {
257 |                         inputEl[type] += '  ';
258 |                     }
259 |                     continue;
260 | 
261 |                 case 'Enter':
262 |                     elKeysEl[i].onclick = function() {
263 |                         inputEl[type] += '\n';
264 |                     }
265 |                     continue;
266 | 
267 |                 case 'Space':
268 |                     elKeysEl[i].onclick = function() {
269 |                         inputEl[type] += ' ';
270 |                     }
271 |                     continue;
272 |             }
273 | 
274 |             elKeysEl[i].onclick = function() {
275 |                 inputEl[type] += this.innerText;
276 |             }
277 |         }
278 |     }
279 | 
280 |     onclick(btn, fn) {
281 |         if (typeof btn !== 'string') {
282 |             console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
283 |             return;
284 |         }
285 | 
286 |         if (typeof fn !== 'function') {
287 |             console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
288 |             return;
289 |         }
290 | 
291 |         if (btn === '*') {
292 |             let elKeysEl = document.querySelectorAll(this.obj.el + ' .akeyboard-keyboard-keys');
293 | 
294 |             for (let i = 0; i < elKeysEl.length; i++) {
295 |                 elKeysEl[i].onclick = fn;
296 |             }
297 | 
298 |             return;
299 |         }
300 | 
301 |         let elKeysEl = document.querySelector(this.obj.el + ' .akeyboard-keyboard-keys-' + btn);
302 | 
303 |         elKeysEl.onclick = fn;
304 |     }
305 | }
306 | 
307 | module.exports = Keyboard;
308 | 


--------------------------------------------------------------------------------
/src/keyboard.mobile.js:
--------------------------------------------------------------------------------
  1 | class MobileKeyboard {
  2 |     constructor(obj) {
  3 |         if (typeof obj !== 'object') {
  4 |             console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
  5 |             return;
  6 |         }
  7 | 
  8 |         this.obj = obj;
  9 | 
 10 |         const el = document.querySelector(obj.el);
 11 | 
 12 |         let keyboardStyle = '';
 13 |         if (typeof obj.style === 'object') {
 14 |             for (let i in obj.style) {
 15 |                 keyboardStyle += i + ': ' + obj.style[i] + ';';
 16 |             }
 17 |         }
 18 | 
 19 |         let html = '<div class="akeyboard-mobileKeyboard' + (obj.fixedBottomCenter ? ' akeyboard-keyboard-fixedBottomCenter' : '') + '" style="' + keyboardStyle + '">';
 20 | 
 21 |         //init keys
 22 |         let numberKeys = [];
 23 |         for (let i = 1; i < 10; i++) {
 24 |             numberKeys.push(i.toString());
 25 |         }
 26 |         numberKeys.push('0');
 27 | 
 28 |         const keys = [
 29 |             ['`'].concat(numberKeys).concat([
 30 |                 '-', '='
 31 |             ]),
 32 |             ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
 33 |             ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\''],
 34 |             ['⇧', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', '⇦'],
 35 |             ['Space', 'Enter']
 36 |         ]
 37 | 
 38 |         let thisKeys;
 39 |         const shiftKey = []
 40 |         for (let i = 0; i < keys.length; i++) {
 41 |             shiftKey.push([]);
 42 |             thisKeys = keys[i];
 43 |             for (let a = 0; a < thisKeys.length; a++) {
 44 |                 if (thisKeys[a].length === 1) {
 45 |                     switch (thisKeys[a]) {
 46 |                         case '`':
 47 |                             shiftKey[i].push('~');
 48 |                             continue;
 49 |                         case '1':
 50 |                             shiftKey[i].push('!');
 51 |                             continue;
 52 |                         case '2':
 53 |                             shiftKey[i].push('@');
 54 |                             continue;
 55 |                         case '3':
 56 |                             shiftKey[i].push('#');
 57 |                             continue;
 58 |                         case '4':
 59 |                             shiftKey[i].push('$');
 60 |                             continue;
 61 |                         case '5':
 62 |                             shiftKey[i].push('%');
 63 |                             continue;
 64 |                         case '6':
 65 |                             shiftKey[i].push('^');
 66 |                             continue;
 67 |                         case '7':
 68 |                             shiftKey[i].push('&');
 69 |                             continue;
 70 |                         case '8':
 71 |                             shiftKey[i].push('*');
 72 |                             continue;
 73 |                         case '9':
 74 |                             shiftKey[i].push('(');
 75 |                             continue;
 76 |                         case '0':
 77 |                             shiftKey[i].push(')');
 78 |                             continue;
 79 |                         case '-':
 80 |                             shiftKey[i].push('_');
 81 |                             continue;
 82 |                         case '=':
 83 |                             shiftKey[i].push('+');
 84 |                             continue;
 85 |                         case '[':
 86 |                             shiftKey[i].push('{');
 87 |                             continue;
 88 |                         case ']':
 89 |                             shiftKey[i].push('}');
 90 |                             continue;
 91 |                         case '\\':
 92 |                             shiftKey[i].push('|');
 93 |                             continue;
 94 |                         case ';':
 95 |                             shiftKey[i].push(':');
 96 |                             continue;
 97 |                         case '\'':
 98 |                             shiftKey[i].push('"');
 99 |                             continue;
100 |                         case ',':
101 |                             shiftKey[i].push('<');
102 |                             continue;
103 |                         case '.':
104 |                             shiftKey[i].push('>');
105 |                             continue;
106 |                         case '/':
107 |                             shiftKey[i].push('?');
108 |                             continue;
109 |                     }
110 |                     shiftKey[i].push(thisKeys[a].toUpperCase());
111 |                     continue;
112 |                 }
113 |                 shiftKey[i].push(thisKeys[a]);
114 |             }
115 |         }
116 | 
117 |         for (let i = 0; i < keys.length; i++) {
118 |             thisKeys = keys[i];
119 |             html += '<div class="akeyboard-keyboard-innerKeys">';
120 |             for (let a = 0; a < thisKeys.length; a++) {
121 |                 html += '<div class="akeyboard-mobileKeyboard-keys akeyboard-mobileKeyboard-keys-' + thisKeys[a] + '">' + thisKeys[a] + '</div>';
122 |             }
123 |             html += '</div>';
124 |         }
125 | 
126 |         html += '</div>';
127 | 
128 |         el.innerHTML = html;
129 | 
130 |         //bind the shift
131 |         const elKeysEl = document.querySelector(obj.el + ' .akeyboard-mobileKeyboard-keys-⇧');
132 | 
133 |         elKeysEl.onclick = function() {
134 |             if (!this.isShift) {
135 |                 //shift
136 |                 elKeysEl.classList.add('akeyboard-mobileKeyboard-keys-focus');
137 |                 elKeysEl.isShift = true;
138 | 
139 |                 const keysInnerEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-innerKeys');
140 | 
141 |                 let thisEl;
142 |                 for (let i = 0; i < keysInnerEl.length; i++) {
143 |                     thisEl = keysInnerEl[i];
144 |                     for (let a = 0; a < thisEl.childNodes.length; a++) {
145 |                         thisEl.childNodes[a].innerHTML = shiftKey[i][a];
146 |                     }
147 |                 }
148 | 
149 |                 return;
150 |             }
151 |             elKeysEl.isShift = false;
152 |             elKeysEl.classList.remove('akeyboard-mobileKeyboard-keys-focus');
153 | 
154 |             const keysInnerEl = document.querySelectorAll(obj.el + ' .akeyboard-keyboard-innerKeys');
155 | 
156 |             let thisEl;
157 |             for (let i = 0; i < keysInnerEl.length; i++) {
158 |                 thisEl = keysInnerEl[i];
159 |                 for (let a = 0; a < thisEl.childNodes.length; a++) {
160 |                     thisEl.childNodes[a].innerHTML = keys[i][a];
161 |                 }
162 |             }
163 |         }
164 |         elKeysEl.isShift = false;
165 |     }
166 | 
167 |     inputOn(inputEle, type) {
168 |         if (typeof inputEle !== 'string') {
169 |             console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
170 |             return;
171 |         }
172 | 
173 |         if (typeof type !== 'string') {
174 |             console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
175 |             return;
176 |         }
177 | 
178 |         const inputEl = document.querySelector(inputEle),
179 |             elKeysEl = document.querySelectorAll(this.obj.el + ' .akeyboard-mobileKeyboard-keys');
180 | 
181 |         for (let i = 0; i < elKeysEl.length; i++) {
182 |             switch (elKeysEl[i].innerHTML) {
183 |                 case '⇧':
184 |                     continue;
185 | 
186 |                 case '⇦':
187 |                     elKeysEl[i].onclick = function() {
188 |                         inputEl[type] = inputEl[type].substr(0, inputEl[type].length - 1);
189 |                     }
190 |                     continue;
191 | 
192 |                 case 'Enter':
193 |                     elKeysEl[i].onclick = function() {
194 |                         inputEl[type] += '\n';
195 |                     }
196 |                     continue;
197 | 
198 |                 case 'Space':
199 |                     elKeysEl[i].onclick = function() {
200 |                         inputEl[type] += ' ';
201 |                     }
202 |                     continue;
203 |             }
204 | 
205 |             elKeysEl[i].onclick = function() {
206 |                 inputEl[type] += this.innerText;
207 |             }
208 |         }
209 |     }
210 | 
211 |     onclick(btn, fn) {
212 |         if (typeof btn !== 'string') {
213 |             console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
214 |             return;
215 |         }
216 | 
217 |         if (typeof fn !== 'function') {
218 |             console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
219 |             return;
220 |         }
221 | 
222 |         if (btn === '*') {
223 |             let elKeysEl = document.querySelectorAll(this.obj.el + ' .akeyboard-mobileKeyboard-keys');
224 | 
225 |             for (let i = 0; i < elKeysEl.length; i++) {
226 |                 elKeysEl[i].onclick = fn;
227 |             }
228 | 
229 |             return;
230 |         }
231 | 
232 |         let elKeysEl = document.querySelector(this.obj.el + ' .akeyboard-mobileKeyboard-keys-' + btn);
233 |         if (elKeysEl === null) {
234 |             elKeysEl = document.querySelector(this.obj.el + ' .akeyboard-mobileKeyboard-keys-' + btn);
235 |         }
236 | 
237 |         elKeysEl.onclick = fn;
238 |     }
239 | }
240 | 
241 | module.exports = MobileKeyboard;
242 | 


--------------------------------------------------------------------------------
/src/keyboard.number.js:
--------------------------------------------------------------------------------
 1 | class NumberKeyboard {
 2 |     constructor(obj) {
 3 |         if (typeof obj !== 'object') {
 4 |             console.error('aKeyboard: The obj parameter needs to be an object <In "new aKeyboard()">');
 5 |             return;
 6 |         }
 7 | 
 8 |         this.obj = obj;
 9 | 
10 |         const el = document.querySelector(obj.el);
11 | 
12 |         let keyboardStyle = '';
13 |         if (typeof obj.style === 'object') {
14 |             for (let i in obj.style) {
15 |                 keyboardStyle += i + ': ' + obj.style[i] + ';';
16 |             }
17 |         }
18 | 
19 |         let html = '<div class="akeyboard-numberKeyboard' + (obj.fixedBottomCenter ? ' akeyboard-keyboard-fixedBottomCenter' : '') + '" style="' + keyboardStyle + '">';
20 | 
21 |         //init keys
22 |         html += '<div class="akeyboard-keyboard-innerKeys">';
23 |         for (let i = 1; i < 10; i++) {
24 |             html += '<div class="akeyboard-keyboard-keys akeyboard-numberKeyboard-keys akeyboard-keyboard-keys-' + i + '">' + i + '</div>';
25 |             if (i % 3 === 0) {
26 |                 html += '</div><div class="akeyboard-keyboard-innerKeys">';
27 |             }
28 |         }
29 |         html += '<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>';
30 | 
31 |         html += '</div>';
32 | 
33 |         el.innerHTML = html;
34 |     }
35 | 
36 |     inputOn(inputEle, type) {
37 |         if (typeof inputEle !== 'string') {
38 |             console.error('aKeyboard: The inputEle parameter needs to be a string <In "aKeyboard.inputOn()">');
39 |             return;
40 |         }
41 | 
42 |         if (typeof type !== 'string') {
43 |             console.error('aKeyboard: The type parameter needs to be a string <In "aKeyboard.inputOn()">');
44 |             return;
45 |         }
46 | 
47 |         const inputEl = document.querySelector(inputEle),
48 |             elKeysEl = document.querySelectorAll(this.obj.el + ' .akeyboard-keyboard-keys');
49 | 
50 |         for (let i = 0; i < elKeysEl.length; i++) {
51 |             if (elKeysEl[i].innerHTML === 'Delete') {
52 |                 elKeysEl[i].onclick = function() {
53 |                     inputEl[type] = inputEl[type].substr(0, inputEl[type].length - 1);
54 |                 }
55 |                 continue;
56 |             }
57 | 
58 |             if (elKeysEl[i].innerHTML === 'Enter') {
59 |                 elKeysEl[i].onclick = function() {
60 |                     inputEl[type] += '\n';
61 |                 }
62 |                 continue;
63 |             }
64 | 
65 |             elKeysEl[i].onclick = function() {
66 |                 inputEl[type] += this.innerText;
67 |             }
68 |         }
69 |     }
70 | 
71 |     onclick(btn, fn) {
72 |         if (typeof btn !== 'string') {
73 |             console.error('aKeyboard: The btn parameter needs to be a string <In "aKeyboard.onclick()">');
74 |             return;
75 |         }
76 | 
77 |         if (typeof fn !== 'function') {
78 |             console.error('aKeyboard: The fn parameter needs to be a function <In "aKeyboard.onclick()">');
79 |             return;
80 |         }
81 | 
82 |         if (btn === '*') {
83 |             let elKeysEl = document.querySelectorAll(this.obj.el + ' .akeyboard-numberKeyboard-keys');
84 | 
85 |             for (let i = 0; i < elKeysEl.length; i++) {
86 |                 elKeysEl[i].onclick = fn;
87 |             }
88 | 
89 |             return;
90 |         }
91 | 
92 |         let elKeysEl = document.querySelector(this.obj.el + ' .akeyboard-numberKeyboard-keys-' + btn);
93 | 
94 |         elKeysEl.onclick = fn;
95 |     }
96 | }
97 | 
98 | module.exports = NumberKeyboard;
99 | 


--------------------------------------------------------------------------------
/src/vue/index.vue.js:
--------------------------------------------------------------------------------
1 | const keyboard = require('./keyboard'),
2 |     numberKeyboard = require('./keyboard.number');
3 | 
4 | window.aKeyboardVue = {
5 |     keyboard,
6 |     numberKeyboard
7 | }
8 | 


--------------------------------------------------------------------------------
/src/vue/keyboard.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |     props: {
  3 |         fixedBottomCenter: Boolean,
  4 |         inputOn: Object,
  5 |         onclick: Object
  6 |     },
  7 |     template: `
  8 |         <div :class="{'akeyboard-keyboard': true, 'akeyboard-keyboard-fixedBottomCenter': fixedBottomCenter}">
  9 |             <div v-for="row of keys" class="akeyboard-keyboard-innerKeys">
 10 |                 <div v-for="key in row" :class="['akeyboard-keyboard-keys', 'akeyboard-keyboard-keys-' + key]" @click="handleClick(key)">
 11 |                     <span v-if="key === 'Shift' && isShift">SHIFT</span>
 12 |                     <span v-else>{{ key }}</span>
 13 |                 </div>
 14 |             </div>
 15 |         </div>
 16 |     `,
 17 |     data() {
 18 | 
 19 |         //init keys
 20 |         let numberKeys = [];
 21 |         for (let i = 1; i < 10; i++) {
 22 |             numberKeys.push(i.toString());
 23 |         }
 24 |         numberKeys.push('0');
 25 | 
 26 |         const keys = [
 27 |             ['`'].concat(numberKeys).concat([
 28 |                 '-', '=', 'Delete'
 29 |             ]),
 30 |             ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
 31 |             ['Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
 32 |             ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
 33 |             ['Space']
 34 |         ]
 35 | 
 36 |         let thisKeys;
 37 |         const shiftKey = [],
 38 |             capsKey = [];
 39 |         for (let i = 0; i < keys.length; i++) {
 40 |             shiftKey.push([]);
 41 |             capsKey.push([]);
 42 |             thisKeys = keys[i];
 43 |             for (let a = 0; a < thisKeys.length; a++) {
 44 |                 if (thisKeys[a].length === 1) {
 45 |                     capsKey[i].push(thisKeys[a].toUpperCase());
 46 |                     switch (thisKeys[a]) {
 47 |                         case '`':
 48 |                             shiftKey[i].push('~');
 49 |                             continue;
 50 |                         case '1':
 51 |                             shiftKey[i].push('!');
 52 |                             continue;
 53 |                         case '2':
 54 |                             shiftKey[i].push('@');
 55 |                             continue;
 56 |                         case '3':
 57 |                             shiftKey[i].push('#');
 58 |                             continue;
 59 |                         case '4':
 60 |                             shiftKey[i].push('$');
 61 |                             continue;
 62 |                         case '5':
 63 |                             shiftKey[i].push('%');
 64 |                             continue;
 65 |                         case '6':
 66 |                             shiftKey[i].push('^');
 67 |                             continue;
 68 |                         case '7':
 69 |                             shiftKey[i].push('&');
 70 |                             continue;
 71 |                         case '8':
 72 |                             shiftKey[i].push('*');
 73 |                             continue;
 74 |                         case '9':
 75 |                             shiftKey[i].push('(');
 76 |                             continue;
 77 |                         case '0':
 78 |                             shiftKey[i].push(')');
 79 |                             continue;
 80 |                         case '-':
 81 |                             shiftKey[i].push('_');
 82 |                             continue;
 83 |                         case '=':
 84 |                             shiftKey[i].push('+');
 85 |                             continue;
 86 |                         case '[':
 87 |                             shiftKey[i].push('{');
 88 |                             continue;
 89 |                         case ']':
 90 |                             shiftKey[i].push('}');
 91 |                             continue;
 92 |                         case '\\':
 93 |                             shiftKey[i].push('|');
 94 |                             continue;
 95 |                         case ';':
 96 |                             shiftKey[i].push(':');
 97 |                             continue;
 98 |                         case '\'':
 99 |                             shiftKey[i].push('"');
100 |                             continue;
101 |                         case ',':
102 |                             shiftKey[i].push('<');
103 |                             continue;
104 |                         case '.':
105 |                             shiftKey[i].push('>');
106 |                             continue;
107 |                         case '/':
108 |                             shiftKey[i].push('?');
109 |                             continue;
110 |                     }
111 |                     shiftKey[i].push(thisKeys[a].toUpperCase());
112 |                     continue;
113 |                 }
114 |                 shiftKey[i].push(thisKeys[a]);
115 |                 capsKey[i].push(thisKeys[a]);
116 |             }
117 |         }
118 | 
119 |         return {
120 |             keys,
121 |             key: JSON.parse(JSON.stringify(keys)),
122 |             shiftKey,
123 |             capsKey,
124 |             isShift: false,
125 |             isCaps: false
126 |         }
127 | 
128 |     },
129 |     methods: {
130 |         handleClick(key) {
131 |             if (this.onclick && this.onclick['*']) {
132 |                 this.onclick['*'].bind(this)();
133 |                 return;
134 |             }
135 | 
136 |             if (this.onclick && this.onclick[key]) {
137 |                 this.onclick[key].bind(this)();
138 |                 return;
139 |             }
140 | 
141 |             const inputEl = document.querySelector(this.inputOn.inputEl);
142 | 
143 |             if (key === 'Shift') {
144 |                 if (this.isCaps) return;
145 |                 if (this.isShift) {
146 |                     this.isShift = false;
147 |                     this.keys = JSON.parse(JSON.stringify(this.key));
148 |                     return;
149 |                 }
150 |                 this.isShift = true;
151 |                 this.keys = JSON.parse(JSON.stringify(this.shiftKey));
152 |                 return;
153 |             } else if (key === 'Caps') {
154 |                 if (this.isShift) return;
155 |                 if (this.isCaps) {
156 |                     this.isCaps = false;
157 |                     this.keys = JSON.parse(JSON.stringify(this.key));
158 |                     return;
159 |                 }
160 |                 this.isCaps = true;
161 |                 this.keys = JSON.parse(JSON.stringify(this.capsKey));
162 |                 return;
163 |             }
164 | 
165 |             if (this.inputOn) {
166 |                 switch (key) {
167 |                     case 'Delete':
168 |                         inputEl[this.inputOn.inputType] = inputEl[this.inputOn.inputType].substr(0, inputEl[this.inputOn.inputType].length - 1);
169 |                         return;
170 | 
171 |                     case 'Tab':
172 |                         inputEl[this.inputOn.inputType] += '  ';
173 |                         return;
174 | 
175 |                     case 'Enter':
176 |                         inputEl[this.inputOn.inputType] += '\n';
177 |                         return;
178 | 
179 |                     case 'Space':
180 |                         inputEl[this.inputOn.inputType] += ' ';
181 |                         return;
182 |                 }
183 | 
184 |                 inputEl[this.inputOn.inputType] += key;
185 |             }
186 |         }
187 |     }
188 | }
189 | 


--------------------------------------------------------------------------------
/src/vue/keyboard.number.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     props: {
 3 |         fixedBottomCenter: Boolean,
 4 |         inputOn: Object,
 5 |         onclick: Object
 6 |     },
 7 |     template: `
 8 |         <div :class="{'akeyboard-numberKeyboard': true, 'akeyboard-keyboard-fixedBottomCenter': fixedBottomCenter}">
 9 |             <div v-for="row of keys" class="akeyboard-keyboard-innerKeys">
10 |                 <div v-for="key in row" :class="['akeyboard-keyboard-keys', 'akeyboard-numberKeyboard-keys', 'akeyboard-keyboard-keys-' + key]" @click="handleClick(key)">
11 |                     {{ key }}
12 |                 </div>
13 |             </div>
14 |         </div>
15 |     `,
16 |     data() {
17 |         const keys = [];
18 | 
19 |         let thisKey = [];
20 | 
21 |         for (let i = 1; i < 10; i++) {
22 |             thisKey.push(i);
23 |             if (i % 3 === 0) {
24 |                 keys.push(thisKey);
25 |                 thisKey = [];
26 |             }
27 |         }
28 | 
29 |         keys.push([
30 |             0,
31 |             'Delete'
32 |         ], [
33 |             'Enter'
34 |         ])
35 | 
36 |         return {
37 |             keys
38 |         }
39 |     },
40 |     methods: {
41 |         handleClick(key) {
42 |             if (this.onclick && this.onclick['*']) {
43 |                 this.onclick['*'].bind(this)();
44 |                 return;
45 |             }
46 | 
47 |             if (this.onclick && this.onclick[key]) {
48 |                 this.onclick[key].bind(this)();
49 |                 return;
50 |             }
51 | 
52 |             const inputEl = document.querySelector(this.inputOn.inputEl);
53 | 
54 |             if (this.inputOn) {
55 |                 switch (key) {
56 |                     case 'Delete':
57 |                         inputEl[this.inputOn.inputType] = inputEl[this.inputOn.inputType].substr(0, inputEl[this.inputOn.inputType].length - 1);
58 |                         return;
59 | 
60 |                     case 'Enter':
61 |                         inputEl[this.inputOn.inputType] += '\n';
62 |                         return;
63 |                 }
64 | 
65 |                 inputEl[this.inputOn.inputType] += key;
66 |             }
67 |         }
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="../css/index.css">
 9 |     <title>A-Keyboard Test</title>
10 | </head>
11 | 
12 | <body>
13 |     <textarea style="margin: auto; display: block;" id="input" rows="8" cols="80"></textarea>
14 |     <br>
15 |     <div id="main"></div>
16 |     <script type="text/javascript" src="../index.js"></script>
17 |     <script type="text/javascript">
18 |         const keyboard = new aKeyboard.keyboard({
19 |             el: '#main',
20 |             style: {},
21 |             fixedBottomCenter: true
22 |         })
23 | 
24 |         keyboard.inputOn('#input', 'value')
25 | 
26 |         keyboard.onclick('Enter', function() {
27 |             alert('oh! 这是自定义事件！它覆盖了原始的回车事件。This is a custom event! It override the original enter event.');
28 |         })
29 | 
30 |         // keyboard.onclick('*', function() {
31 |         //     alert('oh! 这是自定义事件，它覆盖了所有的键。This is a custom event that covers all the keys.')
32 |         // })
33 |     </script>
34 | </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/test/index.mobile.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="../css/index.css">
 9 |     <title>A-Keyboard Test</title>
10 | </head>
11 | 
12 | <body>
13 |     <textarea style="margin: auto; display: block;" id="input" rows="8" cols="80"></textarea>
14 |     <br>
15 |     <div id="main"></div>
16 |     <script type="text/javascript" src="../index.js"></script>
17 |     <script type="text/javascript">
18 |         const keyboard = new aKeyboard.mobileKeyboard({
19 |             el: '#main',
20 |             style: {},
21 |             fixedBottomCenter: true
22 |         })
23 | 
24 |         keyboard.inputOn('#input', 'value');
25 | 
26 |         keyboard.onclick('Enter', function(){
27 |             alert('oh! 这是自定义事件！它覆盖了原始的回车事件。This is a custom event! It override the original enter event.');
28 |         })
29 | 
30 |         // keyboard.onclick('*', function() {
31 |         //     alert('oh! 这是自定义事件，它覆盖了所有的键。This is a custom event that covers all the keys.')
32 |         // })
33 |     </script>
34 | </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/test/index.number.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="../css/index.css">
 9 |     <title>A-Keyboard Test</title>
10 | </head>
11 | 
12 | <body>
13 |     <textarea style="margin: auto; display: block;" id="input" rows="8" cols="80"></textarea>
14 |     <br>
15 |     <div id="main"></div>
16 |     <script type="text/javascript" src="../index.js"></script>
17 |     <script type="text/javascript">
18 |         const keyboard = new aKeyboard.numberKeyboard({
19 |             el: '#main',
20 |             style: {},
21 |             fixedBottomCenter: true
22 |         })
23 | 
24 |         keyboard.inputOn('#input', 'value');
25 | 
26 |         keyboard.onclick('Enter', function(){
27 |             alert('oh! 这是自定义事件！它覆盖了原始的回车事件。This is a custom event! It override the original enter event.');
28 |         })
29 | 
30 |         // keyboard.onclick('*', function() {
31 |         //     alert('oh! 这是自定义事件，它覆盖了所有的键。This is a custom event that covers all the keys.')
32 |         // })
33 |     </script>
34 | </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/test/vue/index.number.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="../../css/index.css">
 9 |     <title>A-Keyboard Test</title>
10 | </head>
11 | 
12 | <body>
13 |     <textarea style="margin: auto; display: block;" id="input" rows="8" cols="80"></textarea>
14 |     <br>
15 |     <div id="main">
16 |         <!-- using v-bind(:) to convert a string to boolean  -->
17 |         <!-- using :style to set CSS style -->
18 |         <a-keyboard :fixed-bottom-center="fixedBottomCenter" :input-on="inputOnObject" :onclick="onclickObject"></a-keyboard>
19 |     </div>
20 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
21 |     <script type="text/javascript" src="../../indexVue.js"></script>
22 |     <script type="text/javascript">
23 |         const keyboard = new Vue({
24 |             el: '#main',
25 |             components: {
26 |                 'a-keyboard': aKeyboardVue.numberKeyboard
27 |             },
28 |             data: {
29 |                 fixedBottomCenter: true,
30 |                 inputOnObject: {
31 |                     inputEl: '#input',
32 |                     inputType: 'value'
33 |                 },
34 |                 onclickObject: {
35 |                     Enter: function() {
36 |                         alert('oh! 这是自定义事件！它覆盖了原始的回车事件。This is a custom event! It override the original enter event.');
37 |                     },
38 |                     // '*': function() {
39 |                     //     alert('oh! 这是自定义事件，它覆盖了所有的键。This is a custom event that covers all the keys.')
40 |                     // }
41 |                 }
42 |             }
43 |         })
44 |     </script>
45 | </body>
46 | 
47 | </html>
48 | 


--------------------------------------------------------------------------------
/test/vue/index.vue.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" href="../../css/index.css">
 9 |     <title>A-Keyboard Test</title>
10 | </head>
11 | 
12 | <body>
13 |     <textarea style="margin: auto; display: block;" id="input" rows="8" cols="80"></textarea>
14 |     <br>
15 |     <div id="main">
16 |         <!-- using v-bind(:) to convert a string to boolean  -->
17 |         <!-- using :style to set CSS style -->
18 |         <a-keyboard :fixed-bottom-center="fixedBottomCenter" :style="styleObject" :input-on="inputOnObject" :onclick="onclickObject"></a-keyboard>
19 |     </div>
20 |     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
21 |     <script type="text/javascript" src="../../indexVue.js"></script>
22 |     <script type="text/javascript">
23 |         const keyboard = new Vue({
24 |             el: '#main',
25 |             components: {
26 |                 'a-keyboard': aKeyboardVue.keyboard
27 |             },
28 |             data: {
29 |                 fixedBottomCenter: false,
30 |                 styleObject: {},
31 |                 inputOnObject: {
32 |                     inputEl: '#input',
33 |                     inputType: 'value'
34 |                 },
35 |                 onclickObject: {
36 |                     Enter: function() {
37 |                         alert('oh! 这是自定义事件！它覆盖了原始的回车事件。This is a custom event! It override the original enter event.');
38 |                     },
39 |                     // '*': function() {
40 |                     //     alert('oh! 这是自定义事件，它覆盖了所有的键。This is a custom event that covers all the keys.')
41 |                     // }
42 |                 }
43 |             }
44 |         })
45 |     </script>
46 | </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/update.md:
--------------------------------------------------------------------------------
1 | ### v1.0.0
2 | 1. Vue.js Support (vue >= 2.6.0)
3 | 2. 优化 if else 代码
4 | 3. 修复 keyboard.number.js css BUG
5 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     entry: {
 3 |         index: './src/index.js',
 4 |         indexVue: './src/vue/index.vue.js'
 5 |     },
 6 |     output: {
 7 |         path: __dirname,
 8 |         filename: '[name].js'
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------