├── .project
├── README.md
├── erweima.png
├── index.html
└── keyboard.js
/.project:
--------------------------------------------------------------------------------
1 |
2 |
3 | keyboard
4 |
5 |
6 |
7 |
8 |
9 | com.aptana.editor.php.aptanaPhpBuilder
10 |
11 |
12 |
13 |
14 | com.aptana.ide.core.unifiedBuilder
15 |
16 |
17 |
18 |
19 |
20 | com.aptana.projects.webnature
21 | com.aptana.editor.php.phpNature
22 |
23 |
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 模拟数字键盘
2 | ----
3 | ```
4 |
19 | ```
20 |
--------------------------------------------------------------------------------
/erweima.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vczero/keyboard/56e4bb74e9589a6db063ce2435ff86774b736995/erweima.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 模拟数字键盘
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/keyboard.js:
--------------------------------------------------------------------------------
1 |
2 | ;(function(exports){
3 | var KeyBoard = function(input, options){
4 | var body = document.getElementsByTagName('body')[0];
5 | var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
6 |
7 | if(document.getElementById(DIV_ID)){
8 | body.removeChild(document.getElementById(DIV_ID));
9 | }
10 |
11 | this.input = input;
12 | this.el = document.createElement('div');
13 |
14 | var self = this;
15 | var zIndex = options && options.zIndex || 1000;
16 | var width = options && options.width || '100%';
17 | var height = options && options.height || '193px';
18 | var fontSize = options && options.fontSize || '15px';
19 | var backgroundColor = options && options.backgroundColor || '#fff';
20 | var TABLE_ID = options && options.table_id || 'table_0909099';
21 | var mobile = typeof orientation !== 'undefined';
22 |
23 | this.el.id = DIV_ID;
24 | this.el.style.position = 'absolute';
25 | this.el.style.left = 0;
26 | this.el.style.right = 0;
27 | this.el.style.bottom = 0;
28 | this.el.style.zIndex = zIndex;
29 | this.el.style.width = width;
30 | this.el.style.height = height;
31 | this.el.style.backgroundColor = backgroundColor;
32 |
33 | //样式
34 | var cssStr = '';
41 |
42 | //Button
43 | var btnStr = '完成
';
46 |
47 | //table
48 | var tableStr = '';
49 | tableStr += '| 1 | 2 | 3 |
';
50 | tableStr += '| 4 | 5 | 6 |
';
51 | tableStr += '| 7 | 8 | 9 |
';
52 | tableStr += '| . | 0 | ';
53 | tableStr += '删除 |
';
54 | tableStr += '
';
55 | this.el.innerHTML = cssStr + btnStr + tableStr;
56 |
57 | function addEvent(e){
58 | var ev = e || window.event;
59 | var clickEl = ev.element || ev.target;
60 | var value = clickEl.textContent || clickEl.innerText;
61 | if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
62 | if(self.input){
63 | self.input.value += value;
64 | }
65 | }else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
66 | body.removeChild(self.el);
67 | }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
68 | var num = self.input.value;
69 | if(num){
70 | var newNum = num.substr(0, num.length - 1);
71 | self.input.value = newNum;
72 | }
73 | }
74 | }
75 |
76 | if(mobile){
77 | this.el.ontouchstart = addEvent;
78 | }else{
79 | this.el.onclick = addEvent;
80 | }
81 | body.appendChild(this.el);
82 | }
83 |
84 | exports.KeyBoard = KeyBoard;
85 |
86 | })(window);
87 |
--------------------------------------------------------------------------------