-
Notifications
You must be signed in to change notification settings - Fork 6
/
demo.html
204 lines (193 loc) · 8.52 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<meta name="Cache-Control" content="private">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>H5键盘demo</title>
<style>
* {
user-select: none;
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
div {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
font-size: 16px;
}
.input {
margin: 20px auto;
width: 80%;
padding: 2px;
min-height: 20px;
overflow: auto;
word-break: break-all;
border: 1px solid #000;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="autoAdapter">
<div id="carNumberKeyboard" class="input" onclick="show('#carNumberKeyboard')"></div>
<div id="numberKeyboard" class="input" onclick="show('#numberKeyboard')"></div>
<div id="digitKeyboard" class="input" onclick="show('#digitKeyboard')"></div>
<div id="idcardKeyboard" class="input" onclick="show('#idcardKeyxboard')"></div>
<div id="urlKeyboard" class="input" onclick="show('#urlKeyboard')"></div>
<div id="carNumberKeyboard2" class="input" onclick="show('#carNumberKeyboard2')"></div>
<div id="numberKeyboard2" class="input" onclick="show('#numberKeyboard2')"></div>
<div id="digitKeyboard2" class="input" onclick="show('#digitKeyboard2')"></div>
<div id="idcardKeyboard2" class="input" onclick="show('#idcardKeyboard2')"></div>
<div id="urlKeyboard2" class="input" onclick="show('#urlKeyboard2')"></div>
<div id="carNumberKeyboard3" class="input" onclick="show('#carNumberKeyboard3')"></div>
<div id="numberKeyboard3" class="input" onclick="show('#numberKeyboard3')"></div>
<div id="digitKeyboard3" class="input" onclick="show('#digitKeyboard3')"></div>
<div id="idcardKeyboard3" class="input" onclick="show('#idcardKeyboard3')"></div>
<div id="urlKeyboard3" class="input" onclick="show('#urlKeyboard3')"></div>
</div>
<link type="text/css" rel="Stylesheet" href="https://oss.cx580.com/public_script/cxy-keyboard-1.3.0/cxy-keyboard.css">
<script src="https://oss.cx580.com/public_script/cxy-keyboard-1.3.0/cxy-keyboard.js"></script>
<script>
// 根据屏幕宽度自动设置页面的字体大小
!function (n, e) {
var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
var n = t.clientWidth;
if (n) {
var e = 50 * (n / 375);
e = e > 54 ? 54 : e;
t.style.fontSize = e + "px";
var s = getComputedStyle ? getComputedStyle(t, false)['fontSize'] : '';
s = (s.substr(0, s.length - 2)) * 1;
if (s && e !== s) {
t.style.fontSize = e * (e / s) + "px";
}
}
};
n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
}(document, window);
// 实例化键盘
window.cxyKeyboard.init({
adapter: {
// 适配器(键盘挡住输入框时的处理方式)
type: 'auto', // auto: 自适应。默认:无
element: document.getElementById('autoAdapter'), // 键盘挡住输入框时需要上移的节点,一般设置表单的父元素
spaceDistance: 50, // 节点上移后输入框与键盘的间隙,单位:px
animation: true, // 动画效果 默认:无
},
inputs: [{
selectors: '#carNumberKeyboard',
placeholder: '车牌号码键盘(有完成按钮,限制了长度为8,且选择车牌前缀后自动切换成字母键盘,只自动切换一次)',
type: 'carNumberPre',
maxLength: 8,
showDoneBtn: true,
}, {
selectors: '#numberKeyboard',
placeholder: '数字键盘(限制了长度为11)',
type: 'number',
value: '13800000000',
maxLength: 11,
}, {
selectors: '#digitKeyboard',
placeholder: '带小数点的数字键盘(只能输入一个小数点,有完成按钮)',
type: 'digit',
excludeRule: /\.{1}\d*\.+\d*/i, // 排除的正则规则
showDoneBtn: true,
}, {
selectors: '#idcardKeyboard',
placeholder: '身份证输入键盘',
type: 'idcard',
}, {
selectors: '#urlKeyboard',
placeholder: 'URL键盘(限制长度为100,有完成按钮)',
type: 'url',
maxLength: 100,
showDoneBtn: true,
}, {
selectors: '#carNumberKeyboard2',
placeholder: '输入框2,键盘挡住时会自动上移',
type: 'carNumberPre',
maxLength: 8,
showDoneBtn: true,
}, {
selectors: '#numberKeyboard2',
placeholder: '输入框2,键盘挡住时会自动上移',
type: 'number',
value: '13800000000',
maxLength: 11,
}, {
selectors: '#digitKeyboard2',
placeholder: '输入框2,键盘挡住时会自动上移',
type: 'digit',
excludeRule: /\.{1}\d*\.+\d*/i, // 排除的正则规则
showDoneBtn: true,
}, {
selectors: '#idcardKeyboard2',
placeholder: '输入框2,键盘挡住时会自动上移',
type: 'idcard',
}, {
selectors: '#urlKeyboard2',
placeholder: '输入框2,键盘挡住时会自动上移',
type: 'url',
maxLength: 100,
showDoneBtn: true,
}, {
selectors: '#carNumberKeyboard3',
placeholder: '输入框3,键盘挡住时会自动上移',
type: 'carNumberPre',
maxLength: 8,
showDoneBtn: true,
}, {
selectors: '#numberKeyboard3',
placeholder: '输入框3,键盘挡住时会自动上移',
type: 'number',
value: '13800000000',
maxLength: 11,
}, {
selectors: '#digitKeyboard3',
placeholder: '输入框3,键盘挡住时会自动上移',
type: 'digit',
excludeRule: /\.{1}\d*\.+\d*/i, // 排除的正则规则
showDoneBtn: true,
}, {
selectors: '#idcardKeyboard3',
placeholder: '输入框3,键盘挡住时会自动上移',
type: 'idcard',
}, {
selectors: '#urlKeyboard3',
placeholder: '输入框3,键盘挡住时会自动上移',
type: 'url',
maxLength: 100,
showDoneBtn: true,
}]
});
// 内容发生改变
cxyKeyboard.onChange = function (value, activeId) {
if (activeId === '#carNumberKeyboard') {
if (!window.autoSwitchKeyboard) {
window.autoSwitchKeyboard = true; // 只自动帮用户切换一次键盘
if (value.length === 1) {
// 自动切换成字母键盘
cxyKeyboard.switchKeyboard('ABC');
}
}
}
console.log('当前所有输入框的详细信息:', cxyKeyboard.inputs);
};
function show(id) {
var isShow = cxyKeyboard.isShow;
var param = {
selectors: id,
animation: !isShow, // 键盘不存在时则显示动画
}
// 键盘如果存在,则切换键盘。不存在则显示键盘
cxyKeyboard.show(param, isShow);
}
</script>
</body>
</html>