jquery.formalize.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. /*
  2. Formalize - version 1.2
  3. Note: This file depends on the jQuery library.
  4. */
  5. // Module pattern:
  6. // http://yuiblog.com/blog/2007/06/12/module-pattern
  7. var FORMALIZE = (function($, window, document, undefined) {
  8. // Internet Explorer detection.
  9. function IE(version) {
  10. var b = document.createElement('b');
  11. b.innerHTML = '<!--[if IE ' + version + ']><br><![endif]-->';
  12. return !!b.getElementsByTagName('br').length;
  13. }
  14. // Private constants.
  15. var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input');
  16. var AUTOFOCUS_SUPPORTED = 'autofocus' in document.createElement('input');
  17. var IE6 = IE(6);
  18. var IE7 = IE(7);
  19. // Expose innards of FORMALIZE.
  20. return {
  21. // FORMALIZE.go
  22. go: function() {
  23. var i, j = this.init;
  24. for (i in j) {
  25. j.hasOwnProperty(i) && j[i]();
  26. }
  27. },
  28. // FORMALIZE.init
  29. init: {
  30. // FORMALIZE.init.full_input_size
  31. full_input_size: function() {
  32. if (!IE7 || !$('textarea, input.input_full').length) {
  33. return;
  34. }
  35. // This fixes width: 100% on <textarea> and class="input_full".
  36. // It ensures that form elements don't go wider than container.
  37. $('textarea, input.input_full').wrap('<span class="input_full_wrap"></span>');
  38. },
  39. // FORMALIZE.init.ie6_skin_inputs
  40. ie6_skin_inputs: function() {
  41. // Test for Internet Explorer 6.
  42. if (!IE6 || !$('input, select, textarea').length) {
  43. // Exit if the browser is not IE6,
  44. // or if no form elements exist.
  45. return;
  46. }
  47. // For <input type="submit" />, etc.
  48. var button_regex = /button|submit|reset/;
  49. // For <input type="text" />, etc.
  50. var type_regex = /date|datetime|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/;
  51. $('input').each(function() {
  52. var el = $(this);
  53. // Is it a button?
  54. if (this.getAttribute('type').match(button_regex)) {
  55. el.addClass('ie6_button');
  56. /* Is it disabled? */
  57. if (this.disabled) {
  58. el.addClass('ie6_button_disabled');
  59. }
  60. }
  61. // Or is it a textual input?
  62. else if (this.getAttribute('type').match(type_regex)) {
  63. el.addClass('ie6_input');
  64. /* Is it disabled? */
  65. if (this.disabled) {
  66. el.addClass('ie6_input_disabled');
  67. }
  68. }
  69. });
  70. $('textarea, select').each(function() {
  71. /* Is it disabled? */
  72. if (this.disabled) {
  73. $(this).addClass('ie6_input_disabled');
  74. }
  75. });
  76. },
  77. // FORMALIZE.init.autofocus
  78. autofocus: function() {
  79. if (AUTOFOCUS_SUPPORTED || !$(':input[autofocus]').length) {
  80. return;
  81. }
  82. $(':input[autofocus]:visible:first').focus();
  83. },
  84. // FORMALIZE.init.placeholder
  85. placeholder: function() {
  86. if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length) {
  87. // Exit if placeholder is supported natively,
  88. // or if page does not have any placeholder.
  89. return;
  90. }
  91. FORMALIZE.misc.add_placeholder();
  92. $(':input[placeholder]').each(function() {
  93. // Placeholder obscured in older browsers,
  94. // so there's no point adding to password.
  95. if (this.type === 'password') {
  96. return;
  97. }
  98. var el = $(this);
  99. var text = el.attr('placeholder');
  100. el.focus(function() {
  101. if (el.val() === text) {
  102. el.val('').removeClass('placeholder_text');
  103. }
  104. }).blur(function() {
  105. FORMALIZE.misc.add_placeholder();
  106. });
  107. // Prevent <form> from accidentally
  108. // submitting the placeholder text.
  109. el.closest('form').submit(function() {
  110. if (el.val() === text) {
  111. el.val('').removeClass('placeholder_text');
  112. }
  113. }).bind('reset', function() {
  114. setTimeout(FORMALIZE.misc.add_placeholder, 50);
  115. });
  116. });
  117. }
  118. },
  119. // FORMALIZE.misc
  120. misc: {
  121. // FORMALIZE.misc.add_placeholder
  122. add_placeholder: function() {
  123. if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length) {
  124. // Exit if placeholder is supported natively,
  125. // or if page does not have any placeholder.
  126. return;
  127. }
  128. $(':input[placeholder]').each(function() {
  129. // Placeholder obscured in older browsers,
  130. // so there's no point adding to password.
  131. if (this.type === 'password') {
  132. return;
  133. }
  134. var el = $(this);
  135. var text = el.attr('placeholder');
  136. if (!el.val() || el.val() === text) {
  137. el.val(text).addClass('placeholder_text');
  138. }
  139. });
  140. }
  141. }
  142. };
  143. // Alias jQuery, window, document.
  144. })(jQuery, this, this.document);
  145. // Automatically calls all functions in FORMALIZE.init
  146. jQuery(document).ready(function() {
  147. FORMALIZE.go();
  148. });