Posted By

mikemetcalf on 02/26/11


Tagged

jquery overlabel


Versions (?)

Simple jQuery overlabel alternative


 / Published in: jQuery
 

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

Focus and keypress events determine when to hide, show, or dim a label.

Use in tandem with the following HTML/CSS:

HTML
<li>
    <label>First Name</label>
    <input>
</li>
CSS
li {
    position: relative;
}

label {
    position: absolute;
    top: 1px;
    left: 1px;
    cursor: text;
}
  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. });

Report this snippet  

You need to login to post a comment.