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
| /*
* 说明 @wzl
* 本插件最后会提供一个对象，可以挂载到window下或者其他对象下
* 本例中，该对象以window.popConfirm为入口访问
*/
window.popConfirm = (function(){
var doc = document;
var _pop = {};
/* 定义EventUtil对象，用于提供对事件相关的统一处理方法 */
var EventUtil = {};
EventUtil.getEvent = function (event) {
return event? event : window.event;
};
EventUtil.getTarget = function(event){
return event.target || event.srcElement;
};
EventUtil.preventDefault = function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
};
EventUtil.stopPropagation = function(event){
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
};
EventUtil.addHandler = function(element, type, handler){
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent('on'+type, handler);
} else {
element['on'+type] = handler;
}
};
/* UI部件的生成与样式 */
var domPopContainer = doc.createElement('div');
domPopContainer.style.cssText = 'display:none; z-index:8000; position:fixed; top:0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5);transition: display 0.3s;';
domPopContainer.name = 'popConfirm';
doc.body.appendChild(domPopContainer);
var text_normal = '<span style="color: #666;">PIN由6位数字组成</span>';
var text_warning = '请输入正确的6位数字PIN码';
var divstr = '<div name="confirmForm" style="margin: 200px auto;width:320px; height: 150px;font-size: 16px; line-height: 1; border-radius: 5px;background-color: #fff; padding: 15px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);">'+
'<div style="text-align: center;padding-top:13px;"><label for="_pop-input-PIN" style="width:40px;padding-right:10px;"> PIN </label>'+
'<input id="_pop-input-PIN" type="password" maxlength="6" style="width: 210px; padding: 5px;border-radius: 3px;border: 1px solid #ccc;"/></div>'+
'<div id="_pop-div-hint" style="height:24px;padding:10px 0 4px 62px;font-size:12px;">'+ text_normal +'</div>'+
'<div style="text-align: center;padding-top:15px;"><button name="confirmButton" style="height: 36px; width: 90px; border-radius:5px; background-color: #5cb85c; border: 1px solid #4cae4c;">确定</button></div>'+
'</div>';
domPopContainer.innerHTML = divstr;
var domInput = doc.getElementById('_pop-input-PIN');
var domHint = doc.getElementById('_pop-div-hint');
/* 下面是对象的方法 */
_pop.show = function(){
domPopContainer.style.setProperty('display', 'block');
};
_pop.hide = function(){
domPopContainer.style.setProperty('display', 'none');
};
_pop.showHint = function(html){
domHint.innerHTML = html || '';
};
/* 输入的pin是个字符串 */
_pop.validatePIN = function(pin){
if (pin.length!==6) {
_pop.showHint('<span style="color: #f00;">不足6个数字！</span>');
return false;
}
var pattern=/^[0-9]{1,20}$/
var isAllNumber = pattern.test(pin);
if(!isAllNumber){
_pop.showHint('<span style="color: #f00;">必须全部是数字！</span>');
return false;
}
return true;
};
_pop.getPIN = function(){
var val = domInput.value;
_pop.PIN = val;
return val;
};
/* 对部件进行事件委托 */
var onConfirmBtnClick = function(){
var pin = _pop.getPIN();
if(_pop.validatePIN(pin)){
_pop.hide();
}
};
EventUtil.addHandler(domPopContainer, 'click', function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var name = target.name;
switch(name){
case 'popConfirm':
/* 单击遮罩背景层，关闭弹出框 */
_pop.hide();
break;
case 'confirmButton':
onConfirmBtnClick();
break;
}
EventUtil.stopPropagation(event);
});
EventUtil.addHandler(domInput, 'focus', function(event){
_pop.showHint(text_normal);
});
EventUtil.addHandler(domInput, 'keydown', function(event){
event = EventUtil.getEvent(event);
if (event.keyCode == 13) {
onConfirmBtnClick();
}
});
return _pop;
})();
|