123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- (function ($) {
-
-
- var BLUR = 0,
- FOCUS = 1,
- NOT_EMPTY = 2,
-
- INPUT_TYPE = /^(?:text|password|search|number|tel|url|email|date(?:time(?:-local)?)?|time|month|week)?$/,
-
- T = function(from, to) { return (from << 3) | to; },
- TRANSITIONS = {};
-
-
- TRANSITIONS[T( FOCUS, BLUR )] = function(base) { base.fadeTo(1.0); };
- TRANSITIONS[T( NOT_EMPTY, BLUR )] = function(base) { base.$label.css({opacity: 1.0}).show(); base.emptied(true); };
- TRANSITIONS[T( BLUR, FOCUS )] = function(base) { base.fadeTo(base.options.fadeOpacity); };
- TRANSITIONS[T( NOT_EMPTY, FOCUS )] = function(base) { base.$label.css({opacity: base.options.fadeOpacity}).show(); base.emptied(true); };
- TRANSITIONS[T( BLUR, NOT_EMPTY )] = function(base) { base.$label.hide(); base.emptied(false); };
- TRANSITIONS[T( FOCUS, NOT_EMPTY )] = TRANSITIONS[T( BLUR, NOT_EMPTY )];
- $.InFieldLabels = function (label, field, options) {
-
-
- var base = this;
-
-
- base.$label = $(label);
- base.label = label;
- base.$field = $(field);
- base.field = field;
- base.$label.data('InFieldLabels', base);
- base.state = BLUR;
- base.init = function () {
-
- base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
- if (base.options.labelClass) {
- base.$label.addClass(base.options.labelClass);
- }
- if (base.options.disableAutocomplete) {
- base.$field.attr('autocomplete', 'off');
- }
- base.$field
- .bind('blur focus change keyup.infield cut', base.updateState)
-
- .bind('paste', function(e){ base.setState(NOT_EMPTY); });
-
- base.updateState();
- };
- base.emptied = function(empty) {
- if (!base.options.emptyWatch) {
- if (empty) {
-
- base.$field.bind('keyup.infield', base.updateState);
- } else {
-
- base.$field.unbind('keyup.infield', base.updateState);
- }
- }
- };
- base.fadeTo = function (opacity) {
- if (!base.options.fadeDuration) {
- base.$label.css({ opacity: opacity });
- } else {
- base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
- }
- };
- base.updateState = function (e, nl) {
- var state = NOT_EMPTY;
- if (base.field.value === '') {
- var focus = e && e.type;
- if (focus === 'focus' || focus === 'keyup') {
- focus = true;
- } else if (focus === 'blur' || focus === 'change') {
- focus = false;
- } else {
- focus = base.$field.is(':focus');
- }
- state = focus ? FOCUS : BLUR;
- }
- base.setState(state, nl);
- };
- base.setState = function (state, nl) {
- if (state === base.state) {
- return;
- }
- var transition = TRANSITIONS[T(base.state, state)];
- if (typeof transition === 'function') {
- transition(base);
- base.state = state;
- } else {
-
- nl || base.updateState(null, true);
- }
- };
-
- base.init();
- };
- $.InFieldLabels.defaultOptions = {
- emptyWatch: true,
- disableAutocomplete: true,
- fadeOpacity: 0.5,
- fadeDuration: 300,
- labelClass: 'in-field'
- };
- $.fn.inFieldLabels = function (options) {
- return this.each(function () {
- if (this.tagName !== 'LABEL') {
- return;
- }
-
-
-
- var for_attr = this.getAttribute('for') || this.htmlFor,
- field, valid = true;
- if (!for_attr) {
- return;
- }
-
- field = document.getElementById(for_attr);
- if (!field) {
- return;
- }
- if (field.tagName === 'INPUT') {
- valid = INPUT_TYPE.test(field.type.toLowerCase());
- } else if (field.tagName !== 'TEXTAREA') {
- valid = false;
- }
-
- valid = valid && !field.getAttribute('placeholder');
- if (!valid) {
- return;
- }
-
- (new $.InFieldLabels(this, field, options));
- });
- };
- }(jQuery));
|