/ Published in: JavaScript

URL: http://nerdfiles.net/jquery-in-field-label/
Expand |
Embed | Plain Text
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>In-Field Label</title> <style> body { font: 1em/1.5 Helvetica, Arial, sans-serif; } .container { margin: 0 auto; width: 720px; } input { font: .75em/1.5 Helvetica, Arial, sans-serif; } .form-field-block { position: relative; } .inline-block { display: inline; } label.in-field-label { margin: .2em 0 0 .3em; cursor: text; position: absolute; } </style> </head> <body> <div class="container"> <form action="" method="post"> <dl> <dt><label for="field1">Field 1</label></dt> <dd> <div class="form-field-block"> <div class="field-label"> <label for="field1">Field 1</label> </div> <div class="field-input"> <input id="field1" name="field1" type="text" value="" class="in-field-label" /> </div> </div> </dd> <dt><label for="field2">Field 2</label></dt> <dd> <div class="form-field-block"> <div class="field-label"> <label for="field2">Field 2</label> </div> <div class="field-input"> <input id="field2" name="field2" type="text" value="" class="in-field-label" /> </div> </div> </dd> <dt><label for="field3">Field 3</label></dt> <dd> <label for="field3">Field 3</label><input id="field3" name="field3" type="text" value="" class="in-field-label" /> </dd> </dl> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> /** * @author: Aaron Alexander * @moddate: 15:16PM 08-10-2010 */ (function($) { $.inFieldLabel = function(class) { $(class).each(function() { // Capture fields and labels var field = $(this), label = (field.prev().length > 0 && field.prev().is("label")) ? field.prev() : field.parent().prev().find("label[for='"+field.attr("id")+"']"); // Apply class to labels label.addClass(class.replace(".","")); if (field.val() !== '') { label.fadeOut('fast'); } // Bind fadeIn and fadeOut behavior field.bind('focus blur', function(e) { if (e.type === 'focus') { label.fadeOut('fast'); } else if (e.type === 'blur') { if (field.val() === '') { label.fadeIn('fast'); } } }); }); }; })(jQuery); jQuery(function($) { $.inFieldLabel(".in-field-label"); }); </script> </body> </html>
You need to login to post a comment.