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
|
/*
* jquery.infieldlabel
* A simple jQuery plugin for adding labels that sit over a form field and fade away when the fields are populated.
*
* Copyright (c) 2009 - 2013 Doug Neiner <doug@dougneiner.com> (http://code.dougneiner.com)
* Source: https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin
* Dual licensed MIT or GPL
* MIT (http://www.opensource.org/licenses/mit-license)
* GPL (http://www.opensource.org/licenses/gpl-license)
*
* @version 0.1.3
*/
(function ($) {
$.InFieldLabels = function (label, field, options) {
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of each element
base.$label = $(label);
base.label = label;
base.$field = $(field);
base.field = field;
base.$label.data("InFieldLabels", base);
base.showing = true;
base.init = function () {
var initialSet;
// Merge supplied options with default options
base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
// Check if the field is already filled in
// add a short delay to handle autocomplete
setTimeout(function() {
if (base.$field.val() !== "") {
base.$label.hide();
base.showing = false;
} else {
base.$label.show();
base.showing = true;
}
}, 200);
base.$field.focus(function () {
base.fadeOnFocus();
}).blur(function () {
base.checkForEmpty(true);
}).bind('keydown.infieldlabel', function (e) {
// Use of a namespace (.infieldlabel) allows us to
// unbind just this method later
base.hideOnChange(e);
}).bind('paste', function () {
// Since you can not paste an empty string we can assume
// that the fieldis not empty and the label can be cleared.
base.setOpacity(0.0);
}).change(function () {
base.checkForEmpty();
}).bind('onPropertyChange', function () {
base.checkForEmpty();
}).bind('keyup.infieldlabel', function () {
base.checkForEmpty();
});
if ( base.options.pollDuration > 0 ) {
initialSet = setInterval( function () {
if (base.$field.val() !== "") {
base.$label.hide();
base.showing = false;
clearInterval( initialSet );
}
}, base.options.pollDuration );
}
};
// If the label is currently showing
// then fade it down to the amount
// specified in the settings
base.fadeOnFocus = function () {
if (base.showing) {
base.setOpacity(base.options.fadeOpacity);
}
};
base.setOpacity = function (opacity) {
base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
base.showing = (opacity > 0.0);
};
// Checks for empty as a fail safe
// set blur to true when passing from
// the blur event
base.checkForEmpty = function (blur) {
if (base.$field.val() === "") {
base.prepForShow();
base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
} else {
base.setOpacity(0.0);
}
};
base.prepForShow = function () {
if (!base.showing) {
// Prepare for a animate in...
base.$label.css({opacity: 0.0}).show();
// Reattach the keydown event
base.$field.bind('keydown.infieldlabel', function (e) {
base.hideOnChange(e);
});
}
};
base.hideOnChange = function (e) {
if (
(e.keyCode === 16) || // Skip Shift
(e.keyCode === 9) // Skip Tab
) {
return;
}
if (base.showing) {
base.$label.hide();
base.showing = false;
}
// Remove keydown event to save on CPU processing
base.$field.unbind('keydown.infieldlabel');
};
// Run the initialization method
base.init();
};
$.InFieldLabels.defaultOptions = {
fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
fadeDuration: 300, // How long should it take to animate from 1.0 opacity to the fadeOpacity
pollDuration: 0, // If set to a number greater than zero, this will poll until content is detected in a field
enabledInputTypes: [ "text", "search", "tel", "url", "email", "password", "number", "textarea" ]
};
$.fn.inFieldLabels = function (options) {
var allowed_types = options && options.enabledInputTypes || $.InFieldLabels.defaultOptions.enabledInputTypes;
return this.each(function () {
// Find input or textarea based on for= attribute
// The for attribute on the label must contain the ID
// of the input or textarea element
var for_attr = $(this).attr('for'), field, restrict_type;
if (!for_attr) {
return; // Nothing to attach, since the for field wasn't used
}
// Find the referenced input or textarea element
field = document.getElementById( for_attr );
if ( !field ) {
return; // No element found
}
// Restrict input type
restrict_type = $.inArray( field.type, allowed_types );
if ( restrict_type === -1 && field.nodeName !== "TEXTAREA" ) {
return; // Again, nothing to attach
}
// Only create object for matched input types and textarea
(new $.InFieldLabels(this, field, options));
});
};
}(jQuery));
|
