Fallback for Placeholder


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



Copy this code and paste it in your HTML
  1. /*
  2.  * Andrew Wayne 2010
  3.  * A fallback for html5 placeholder attribute
  4. */
  5. var placeholder = {
  6. isPassword: function(input) {
  7. return $(input).attr('realType') === 'password';
  8. },
  9.  
  10. valueIsPlaceholder: function (input) {
  11. return input.value === $(input).attr('placeholder');
  12. },
  13.  
  14. showPlaceholder: function (input, loading) {
  15. // FF and IE save values when you refresh the page. If the user refreshes the page
  16. // with the placeholders showing they will be the default values and the input fields won't
  17. // be empty. Using loading && valueIsPlaceholder is a hack to get around this and highlight
  18. // the placeholders properly on refresh.
  19. if (input.value === '' || (loading && placeholder.valueIsPlaceholder(input))) {
  20. if (placeholder.isPassword(input)) {
  21. // Must use setAttribute rather than jQuery as jQuery throws an exception
  22. // when changing type to maintain compatability with IE.
  23. // We use our own "compatability" method by simply swallowing the error.
  24. try {
  25. input.setAttribute('type', 'input');
  26. } catch (e) { }
  27. }
  28.  
  29. input.value = $(input).attr('placeholder');
  30. $(input).addClass('placeholder');
  31. }
  32. },
  33.  
  34. hidePlaceholder: function(input) {
  35. if (placeholder.valueIsPlaceholder(input) && $(input).hasClass('placeholder')) {
  36. if (placeholder.isPassword(input)) {
  37. try {
  38. input.setAttribute('type', 'password');
  39. // Opera loses focus when you change the type, so we have to refocus it.
  40. input.focus();
  41. } catch (e) { }
  42. }
  43.  
  44. input.value = '';
  45. $(input).removeClass('placeholder');
  46. }
  47. },
  48.  
  49. init: function () {
  50. $(':text[placeholder],:password[placeholder]').each(function(index) {
  51. var $this = $(this);
  52. // We change the type of password fields to text so their placeholder shows.
  53. // We need to store somewhere that they are actually password fields so we can convert
  54. // back when the users types something in.
  55. if ($this.attr('type') === 'password') {
  56. $this.attr('realType', 'password');
  57. }
  58.  
  59. placeholder.showPlaceholder(this, true);
  60.  
  61. $this.focus(function() { placeholder.hidePlaceholder(this); });
  62. $this.blur(function() { placeholder.showPlaceholder(this, false); });
  63. });
  64. }
  65. };
  66.  
  67. // Example usage
  68. Markup: <input placeholder="Enter Name" type="text"/>
  69.  
  70. JS:
  71. // This example assumes you use Modernizr lib to check for available attributes
  72.  
  73. if (!Modernizr.input.placeholder) {
  74. // no placeholder support :(
  75. // fall back to a scripted solution
  76. placeholder.init();
  77. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.