Posted By

nerdfiles on 01/19/11


Tagged

javascript js default placeholder


Versions (?)

Input/Textarea Field Placeholder


 / Published in: JavaScript
 

  1. <style>
  2. .placeholder-value { color: #999; }
  3. input::-webkit-input-placeholder { color: #999; }
  4. input:-moz-placeholder { color: #999; }
  5. input:placeholder,
  6. input::placeholder,
  7. input:input-placeholder,
  8. input::input-placeholder{ color: #999; }
  9. </style>
  10.  
  11. ;(function($) {
  12.  
  13. $.placeHolder = function(options_args) {
  14.  
  15. var defaults = {
  16. selector: "input,textarea",
  17. activeClass: "placeholder-value"
  18. },
  19. settings = (options_args) ?
  20. options_args :
  21. defaults,
  22. selector = settings["selector"],
  23. activeClass = settings["activeClass"];
  24.  
  25. return {
  26.  
  27. trigger: $(selector).each(function(index, e) {
  28.  
  29. var detect = navigator.userAgent.toLowerCase(),
  30. $self = $(this);
  31.  
  32. if (detect.indexOf("safari") > 0)
  33. return false;
  34.  
  35. $self.addClass( activeClass );
  36.  
  37. if ($self.attr("type") === "text" || $self[0].nodeName === "TEXTAREA") {
  38.  
  39. if ( $self.attr("placeholder") &&
  40. $self.attr("placeholder").length > 0 ) {
  41.  
  42. $self.val( $self.attr("placeholder") );
  43.  
  44. $self.bind("click", function(e) {
  45.  
  46. var $self = $(this);
  47.  
  48. if ($self.val() === $self.attr("placeholder"))
  49. $self.val("");
  50.  
  51.  
  52. if ($self.val() !== "" && $self.val() !== $self.attr("placeholder")) {
  53. $self.removeClass( activeClass );
  54. } else {
  55. $self.addClass( activeClass );
  56. }
  57.  
  58. return false;
  59. });
  60.  
  61. $self.bind("keydown", function(e) {
  62.  
  63. var $self = $(this);
  64.  
  65. if ($self.val() === "") {
  66. $self.addClass( activeClass );
  67. } else {
  68. $self.removeClass( activeClass );
  69. }
  70.  
  71. });
  72.  
  73. $self.bind("blur", function(e) {
  74. var $self = $(this);
  75.  
  76. if ($self.val().length < 1)
  77. $self.val( $self.attr("placeholder") )
  78.  
  79. if ($self.val() !== "" && $self.val() !== $self.attr("placeholder")) {
  80. $self.removeClass( activeClass );
  81. } else {
  82. $self.addClass( activeClass );
  83. }
  84. });
  85.  
  86. }
  87.  
  88. }
  89.  
  90. })
  91.  
  92. } //return
  93.  
  94. };
  95.  
  96. })(jQuery);
  97.  
  98. $.placeHolder();

Report this snippet  

You need to login to post a comment.