advanced code snippet search

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/

Expand | Embed | Plain Text 
  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.