Solutions. For Life.

Inline input fields with minimal jQuery

posted on: 5/25/2012, 2:46:00 PM

last updated: 5/25/2012, 2:46:00 PM

by: skamansam

1 min read

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:

    color: inherit;
    padding: inherit;
    margin: inherit;
    border: none;
    background: transparent;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;

h2 {
    color: #648dd7;
    font-size: 18px;
    font-weight: normal;
    margin-top: 16px;
    margin-left: 2px;

and in my html, I have:

<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:

                      function(){ $(this).addClass('hidden') }