HTML5 placeholder attribute support shim


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /*
  2.  
  3. EXAMPLE USAGE:
  4.  
  5. placeholderize('placeholder-on', document);
  6.  
  7. EXAMPLE CSS:
  8. .placeholder-on {
  9. color: #85929C !important;
  10. }
  11. :-moz-placeholder {
  12. color: #85929C !important;
  13. }
  14. ::-webkit-input-placeholder {
  15. color: #85929C !important;
  16. }
  17. :placeholder {
  18. color: #85929C !important;
  19. }
  20.  
  21. */
  22. function placeholderize(cssClassName, parent) {
  23.  
  24. var testInput = document.createElement('input');
  25. var testTexarea = document.createElement('textarea');
  26.  
  27. if (!('placeholder' in testInput) || !('placeholder' in testTexarea)) {
  28. setup();
  29. }
  30.  
  31. function setup() {
  32. parent = parent || document;
  33. var cssClassNameRegex = new RegExp('\\b' + cssClassName + '\\b', 'g');
  34. var i = 0;
  35. var input;
  36. var inputs;
  37. if (!('placeholder' in testInput)) {
  38. inputs = parent.getElementsByTagName('input');
  39. while ((input = inputs[i++])) {
  40. if ( !! input.getAttribute('placeholder')) {
  41. setupElement(input);
  42. }
  43. }
  44. i = 0;
  45. }
  46. if (!('placeholder' in testTexarea)) {
  47. inputs = parent.getElementsByTagName('textarea');
  48. while ((input = inputs[i++])) {
  49. if ( !! input.getAttribute('placeholder')) {
  50. setupElement(input);
  51. }
  52. }
  53. }
  54.  
  55. // shortcut to add listeners
  56. function listen(el, type, fn) {
  57. if (document.addEventListener) {
  58. el.addEventListener(type, fn, false);
  59. } else if (document.attachEvent) {
  60. el.attachEvent('on' + type, fn);
  61. }
  62. }
  63.  
  64. function setupElement(input) {
  65. if (input.placeholderized) {
  66. return;
  67. }
  68. input.placeholderized = true;
  69. // style
  70. stylePlaceholder(input);
  71. // observers
  72. if (input.type == 'password') {
  73. setupPassword(input);
  74. } else {
  75. setupText(input);
  76. }
  77. if (input.form && input.form.tagName) {
  78. listen(input.form, 'submit', function() {
  79. clearIfPlaceholder(input);
  80. });
  81. }
  82. }
  83.  
  84. function setupPassword(input) {
  85. var passwordInput = input;
  86. var parent = passwordInput.parentNode;
  87. var textInput = document.createElement('input');
  88. var copyAttr = function (dest, source, attr) {
  89. var name, i = 0;
  90. while ((name = attr[i++])) {
  91. dest.setAttribute(name, source.getAttribute(name));
  92. }
  93. };
  94. var showText = function () {
  95. // if password value is empty, show text input with placeholder
  96. if (passwordInput.value == '' && passwordInput.parentNode) {
  97. textInput.value = passwordInput.getAttribute('placeholder');
  98. parent.replaceChild(textInput, passwordInput);
  99. }
  100. };
  101. var showPassword = function () {
  102. // show password input
  103. if (textInput.parentNode) {
  104. parent.replaceChild(passwordInput, textInput);
  105. window.setTimeout(function () {
  106. // IE needs a moment to add the password to the DOM tree before focusing (tested on IE8)
  107. passwordInput.focus();
  108. }, 10);
  109. }
  110. };
  111. textInput.type = 'text';
  112. copyAttr(textInput, passwordInput, 'id class style title size maxlength'.split(' '));
  113. stylePlaceholder(passwordInput);
  114. listen(textInput, 'focus', showPassword);
  115. listen(passwordInput, 'blur', showText);
  116. showText();
  117. }
  118.  
  119. function setIfEmpty(input) {
  120. if (input.value == '' || input.value == input.getAttribute('placeholder')) {
  121. input.value = input.getAttribute('placeholder');
  122. stylePlaceholder(input);
  123. } else {
  124. styleInput(input);
  125. }
  126. }
  127.  
  128. function clearIfPlaceholder(input) {
  129. if (input.value == input.getAttribute('placeholder')) {
  130. input.value = '';
  131. styleInput(input);
  132. }
  133. }
  134.  
  135. function setupText(input) {
  136. // add listeners
  137. listen(input, 'focus', function() {
  138. clearIfPlaceholder(input);
  139. });
  140. listen(input, 'blur', function() {
  141. setIfEmpty(input);
  142. });
  143. // initialize placeholders
  144. clearIfPlaceholder(input);
  145. setIfEmpty(input);
  146. }
  147.  
  148. function stylePlaceholder(input) {
  149. if (cssClassName) {
  150. addCssClass(input);
  151. }
  152. else {
  153. input.style.color = '#A9A9A9';
  154. }
  155. }
  156.  
  157. function styleInput(input) {
  158. if (cssClassName) {
  159. removeCssClass(input);
  160. }
  161. else {
  162. input.style.color = '';
  163. }
  164. }
  165.  
  166. function removeCssClass(input) {
  167. input.className = input.className.replace(cssClassNameRegex, '').replace(/^\s*(\S*(\s+\S+)*)\s*$/, "$1");
  168. }
  169.  
  170. function addCssClass(input) {
  171. removeCssClass(input);
  172. input.className = (input.className.length > 0 ? input.className + ' ' : '') + cssClassName;
  173. }
  174.  
  175. }
  176.  
  177. }

URL: placeholderize

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.