jquery - 动态将标题更改为文本框

Question

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

这是我的 HTML 代码。我想让一个文本框出现，用户可以更改 h1 的值并保存它。

这是我的尝试。

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

问题是当我点击它时文本框失去焦点。

Answer 1

用这个：

$('#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();
})​;

现场演示

问题是您每次点击都会覆盖 div 的 innerHTML。
所以它不仅仅是“松散的焦点”，而是每次点击都会松散innerHTML。

one允许您附加一个只会触发一次的回调。

---

你也可以试试这个 DEMO，它告诉你如何改变<h1>文本