Question

<div id="form_title">
    <h1>Form Title</h1>
</div>

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

Here is my attempt.

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

The problem is that the textbox looses focus when I click on it.

Answer 1

Use this:

$('#form_title').one('click', function() {
    $(this).html('<input id="form_title_value" name="form_title_value" 
                         type="text" placeholder="Enter Form Title...">')
               .find('input').focus();
})​;

Live DEMO

The problem is that you override the innerHTML of the div with each click.
So it no just “loose focus” but it loose the innerHTML with each click.

one lets you attach a callback that will fire only once.

---

You can try this DEMO as well, that shows you how you can change the <h1> text