Advanced Search

Simple jQuery overlabel alternative

/ Published in: jQuery
Save to your folder(s)
Focus and keypress events determine when to hide, show, or dim a label.

Use in tandem with the following HTML/CSS:


HTML
----

<li>
First Name

</li>


CSS
----


li {
position: relative;
}

label {
position: absolute;
top: 1px;
left: 1px;
cursor: text;
}

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function() {
  2.  
  3. 	$('input[type=text]').focusin(function () {
  4. 		$(this).prev('label').css('color','#999');
  5. 	});
  6.  
  7. 	$('input[type=text]').focusout(function () {
  8. 		$(this).prev('label').css('color','#111');
  9. 	});
  10.  
  11. 	$('input[type=text]').keydown(function () {
  12. 		if($(this).attr('value') == '') {
  13. 			$(this).prev('label').hide();
  14. 		}
  15. 	});
  16.  
  17. 	$('input[type=text]').keyup(function () {
  18. 		if ($(this).attr('value') == '') {
  19. 			$(this).prev('label').show();
  20. 			$(this).prev('label').css('color','#999');
  21. 		}
  22. 	});
  23.  
  24. });

URL: http://mikemetcalf.com/share/overlabel

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.