Posted By

nerdfiles on 07/31/10


Tagged

jquery label in-field


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jfherring
LeeRJohnson


In-Field Labels and jQuery


 / Published in: JavaScript
 

URL: http://nerdfiles.net/jquery-in-field-label/

  1. <!DOCTYPE HTML>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6. <meta charset="utf-8" />
  7. <title>In-Field Label</title>
  8. <style>
  9. body { font: 1em/1.5 Helvetica, Arial, sans-serif; }
  10. .container { margin: 0 auto; width: 720px; }
  11. input { font: .75em/1.5 Helvetica, Arial, sans-serif; }
  12. .form-field-block { position: relative; }
  13. .inline-block { display: inline; }
  14. label.in-field-label { margin: .2em 0 0 .3em; cursor: text; position: absolute; }
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div class="container">
  20. <form action="" method="post">
  21.  
  22. <dl>
  23. <dt><label for="field1">Field 1</label></dt>
  24. <dd>
  25. <div class="form-field-block">
  26. <div class="field-label">
  27. <label for="field1">Field 1</label>
  28. </div>
  29. <div class="field-input">
  30.  
  31. <input id="field1" name="field1" type="text" value="" class="in-field-label" />
  32. </div>
  33. </div>
  34. </dd>
  35. <dt><label for="field2">Field 2</label></dt>
  36. <dd>
  37. <div class="form-field-block">
  38. <div class="field-label">
  39.  
  40. <label for="field2">Field 2</label>
  41. </div>
  42. <div class="field-input">
  43. <input id="field2" name="field2" type="text" value="" class="in-field-label" />
  44. </div>
  45. </div>
  46. </dd>
  47. <dt><label for="field3">Field 3</label></dt>
  48.  
  49. <dd>
  50. <label for="field3">Field 3</label><input id="field3" name="field3" type="text" value="" class="in-field-label" />
  51. </dd>
  52. </dl>
  53. </form>
  54. </div>
  55. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  56. <script>
  57.  
  58. /**
  59.  * @author: Aaron Alexander
  60.  * @moddate: 15:16PM 08-10-2010
  61.  */
  62.  
  63. (function($) {
  64. $.inFieldLabel = function(class) {
  65.  
  66. $(class).each(function() {
  67.  
  68. // Capture fields and labels
  69. var field = $(this),
  70. label = (field.prev().length > 0 && field.prev().is("label")) ?
  71. field.prev() :
  72. field.parent().prev().find("label[for='"+field.attr("id")+"']");
  73.  
  74. // Apply class to labels
  75. label.addClass(class.replace(".",""));
  76.  
  77. if (field.val() !== '') {
  78. label.fadeOut('fast');
  79. }
  80.  
  81. // Bind fadeIn and fadeOut behavior
  82. field.bind('focus blur', function(e) {
  83. if (e.type === 'focus') {
  84. label.fadeOut('fast');
  85. } else if (e.type === 'blur') {
  86. if (field.val() === '') {
  87. label.fadeIn('fast');
  88. }
  89. }
  90. });
  91. });
  92.  
  93. };
  94. })(jQuery);
  95.  
  96. jQuery(function($) {
  97. $.inFieldLabel(".in-field-label");
  98. });
  99.  
  100. </script>
  101.  
  102. </body>
  103.  
  104. </html>

Report this snippet  

You need to login to post a comment.