Inline input fields with mnimal jQuery

For one of my projects, i needed to put a text field inside a header element. When I did so, the input field ruined my layout and good looks! So I went the jQuery way and devised a method for hiding inputs when not in use, but when clicking on it, turns into a normal input field. So in my CSS, I add:

  1.  
  2. input.hidden{
  3.     color: inherit;
  4.     padding: inherit;
  5.     margin: inherit;
  6.     border: none;
  7.     background: transparent;
  8.     font-size: inherit;
  9.     font-weight: inherit;
  10.     font-family: inherit;
  11.    
  12. }
  13. h2 {
  14.     color: #648dd7;
  15.     font-size: 18px;
  16.     font-weight: normal;
  17.     margin-top: 16px;
  18.     margin-left: 2px;
  19. }
  20.  

and in my html, I have:

  1.  
  2. <h2>Header<input name="myInput" value="[Header Input]" class="hidden"/></h2>

And here is the fun part. Essentially one line of javascript to accomplish this easy feat:

  1.  
  2. $(‘input.hidden’).live(‘focus’,function(){
  3.     $(this).removeClass(‘hidden’).live(‘blur’,
  4.                                        function(){$(this).addClass(‘hidden                                                                                              ’)})})​;
  5.  

There are currently no comments for this post.

Leave a Reply