-
Notifications
You must be signed in to change notification settings - Fork 6.4k
/
Copy pathform_input_status.html
135 lines (130 loc) · 5.94 KB
/
form_input_status.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
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">输入框状态</h2>
<div class="weui-form__desc">可体验表单输入的反馈状态。显示报错信息有两种类型，一种是超过1个输入项的时候，用置顶tipsbar报错信息，告知错误原因，页面聚焦到对应的报错区域，内容标红色，另一种是在当前输入项位置报错，适用于只有1个输入项的时候，用户焦点主要是输入区域。</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单报错：置顶tipsbar报错信息</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active" id="js_cell">
<div class="weui-cell__hd"><span class="weui-label">卡号</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input1" class="weui-input" type="text" pattern="[0-9]*" placeholder="请输入16位数卡号" maxlength="16" />
<button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
<i class="weui-icon-clear"></i>
</button>
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">持卡人</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input2" class="weui-input" type="text" placeholder="请输入持卡人姓名" />
</div>
</label>
</div>
</div>
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单报错：当前项位置报错</div>
<div class="weui-cells">
<label for="js_current_input" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">金额</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_current_input" class="weui-input" type="text" placeholder="请输入金额" />
</div>
</label>
</div>
<div role="alert" id="js_current_tips" style="display: none;" class="weui-cells__tips weui-cells__tips_warn">最多支持8位数</div>
</div>
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单只读、置灰</div>
<div class="weui-cells">
<label for="js_input3" class="weui-cell weui-cell_active weui-cell_readonly">
<div class="weui-cell__hd"><span class="weui-label">EMail</span></div>
<div class="weui-cell__bd">
<input id="js_input3" class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
</div>
</label>
<label for="js_input4" class="weui-cell weui-cell_active weui-cell_disabled">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input4" class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" aria-disabled="true" disabled class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
var $input = $('#js_input1');
var $inputClear = $('#js_input_clear');
var $cell = $('#js_cell');
var $currentInput = $('#js_current_input');
$input.on('input', function(){
var $value = $input.val();
if ($cell.hasClass('weui-cell_warn')){
$cell.removeClass('weui-cell_warn');
}
if ($value){
$('#showTooltips').removeClass('weui-btn_disabled');
$('#showTooltips').removeAttr('disabled');
$('#showTooltips').attr('aria-disabled','false');
}else{
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').addAttr('disabled');
$('#showTooltips').attr('aria-disabled','true');
}
});
$currentInput.on('input', function(){
var $value = $currentInput.val();
if ($value){
$('#js_current_tips').css('display','block');
}else{
$('#js_current_tips').css('display','none');
}
});
$('#showTooltips').on('click', function(){
if ($(this).hasClass('weui-btn_disabled')) return;
var $value = $input.val();
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
if($value.length < 16){
$cell.addClass('weui-cell_warn');
$tooltips.fadeIn(100);
setTimeout(function () {
$tooltips.fadeOut(100);
}, 2000);
}else{
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
}
});
$inputClear.on('click', function(){
$input.val('');
});
});
</script>