Changing heading into textbox dynamically
<pre><code>&lt;div id="form_title"&gt;
    &lt;h1&gt;Form Title&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<p>This is my HTML code. I want to make a text box appear whereby user can change the value of h1 and save it.</p>

<p>Here is my attempt.</p>

<pre><code>$('#form_title').click(function() {
    $(this).html('&lt;input id="form_title_value" name="form_title_value"
                         type="text" placeholder="Enter Form Title..."&gt; ');
});​
</code></pre>

<p>The problem is that the textbox looses focus when I click on it.</p>
