jquery.infieldlabel.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. /*
  2. * jquery.infieldlabel
  3. * A simple jQuery plugin for adding labels that sit over a form field and fade away when the fields are populated.
  4. *
  5. * Copyright (c) 2009 - 2013 Doug Neiner <doug@dougneiner.com> (http://code.dougneiner.com)
  6. * Source: https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin
  7. * Dual licensed MIT or GPL
  8. * MIT (http://www.opensource.org/licenses/mit-license)
  9. * GPL (http://www.opensource.org/licenses/gpl-license)
  10. *
  11. * @version 0.1.3
  12. */
  13. (function ($) {
  14. $.InFieldLabels = function (label, field, options) {
  15. // To avoid scope issues, use 'base' instead of 'this'
  16. // to reference this class from internal events and functions.
  17. var base = this;
  18. // Access to jQuery and DOM versions of each element
  19. base.$label = $(label);
  20. base.label = label;
  21. base.$field = $(field);
  22. base.field = field;
  23. base.$label.data("InFieldLabels", base);
  24. base.showing = true;
  25. base.init = function () {
  26. var initialSet;
  27. // Merge supplied options with default options
  28. base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
  29. // Check if the field is already filled in
  30. // add a short delay to handle autocomplete
  31. setTimeout(function() {
  32. if (base.$field.val() !== "") {
  33. base.$label.hide();
  34. base.showing = false;
  35. } else {
  36. base.$label.show();
  37. base.showing = true;
  38. }
  39. }, 200);
  40. base.$field.focus(function () {
  41. base.fadeOnFocus();
  42. }).blur(function () {
  43. base.checkForEmpty(true);
  44. }).bind('keydown.infieldlabel', function (e) {
  45. // Use of a namespace (.infieldlabel) allows us to
  46. // unbind just this method later
  47. base.hideOnChange(e);
  48. }).bind('paste', function () {
  49. // Since you can not paste an empty string we can assume
  50. // that the fieldis not empty and the label can be cleared.
  51. base.setOpacity(0.0);
  52. }).change(function () {
  53. base.checkForEmpty();
  54. }).bind('onPropertyChange', function () {
  55. base.checkForEmpty();
  56. }).bind('keyup.infieldlabel', function () {
  57. base.checkForEmpty();
  58. });
  59. if ( base.options.pollDuration > 0 ) {
  60. initialSet = setInterval( function () {
  61. if (base.$field.val() !== "") {
  62. base.$label.hide();
  63. base.showing = false;
  64. clearInterval( initialSet );
  65. }
  66. }, base.options.pollDuration );
  67. }
  68. };
  69. // If the label is currently showing
  70. // then fade it down to the amount
  71. // specified in the settings
  72. base.fadeOnFocus = function () {
  73. if (base.showing) {
  74. base.setOpacity(base.options.fadeOpacity);
  75. }
  76. };
  77. base.setOpacity = function (opacity) {
  78. base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
  79. base.showing = (opacity > 0.0);
  80. };
  81. // Checks for empty as a fail safe
  82. // set blur to true when passing from
  83. // the blur event
  84. base.checkForEmpty = function (blur) {
  85. if (base.$field.val() === "") {
  86. base.prepForShow();
  87. base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
  88. } else {
  89. base.setOpacity(0.0);
  90. }
  91. };
  92. base.prepForShow = function () {
  93. if (!base.showing) {
  94. // Prepare for a animate in...
  95. base.$label.css({opacity: 0.0}).show();
  96. // Reattach the keydown event
  97. base.$field.bind('keydown.infieldlabel', function (e) {
  98. base.hideOnChange(e);
  99. });
  100. }
  101. };
  102. base.hideOnChange = function (e) {
  103. if (
  104. (e.keyCode === 16) || // Skip Shift
  105. (e.keyCode === 9) // Skip Tab
  106. ) {
  107. return;
  108. }
  109. if (base.showing) {
  110. base.$label.hide();
  111. base.showing = false;
  112. }
  113. // Remove keydown event to save on CPU processing
  114. base.$field.unbind('keydown.infieldlabel');
  115. };
  116. // Run the initialization method
  117. base.init();
  118. };
  119. $.InFieldLabels.defaultOptions = {
  120. fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
  121. fadeDuration: 300, // How long should it take to animate from 1.0 opacity to the fadeOpacity
  122. pollDuration: 0, // If set to a number greater than zero, this will poll until content is detected in a field
  123. enabledInputTypes: [ "text", "search", "tel", "url", "email", "password", "number", "textarea" ]
  124. };
  125. $.fn.inFieldLabels = function (options) {
  126. var allowed_types = options && options.enabledInputTypes || $.InFieldLabels.defaultOptions.enabledInputTypes;
  127. return this.each(function () {
  128. // Find input or textarea based on for= attribute
  129. // The for attribute on the label must contain the ID
  130. // of the input or textarea element
  131. var for_attr = $(this).attr('for'), field, restrict_type;
  132. if (!for_attr) {
  133. return; // Nothing to attach, since the for field wasn't used
  134. }
  135. // Find the referenced input or textarea element
  136. field = document.getElementById( for_attr );
  137. if ( !field ) {
  138. return; // No element found
  139. }
  140. // Restrict input type
  141. restrict_type = $.inArray( field.type, allowed_types );
  142. if ( restrict_type === -1 && field.nodeName !== "TEXTAREA" ) {
  143. return; // Again, nothing to attach
  144. }
  145. // Only create object for matched input types and textarea
  146. (new $.InFieldLabels(this, field, options));
  147. });
  148. };
  149. }(jQuery));