Как сфокусироваться на только что созданном элементе?

Question

[Вячеслав]

Есть вот такой код

$(document).ready(function () {
    $("div.field").click(function () {
        $(this).replaceWith('<input class="field" type="text" value=' + $(this).text() + '>');
    });
});

$(document).click(function () {
    $("input.field").blur(function () {
        $(this).replaceWith('<div class="field">' + $(this).val() + '</div>');
    });
});

Стоит задача, при клике на div, сделать его полем ввода, а затем измененный текст вернуть обратно в div.
Код работает, но с косяками.
Вопросов 2:
1. При нажатии на div, появляется поле ввода, но фокус в него не устанавливается. Как исправить?
2. При повторном нажатии поле ввода не появляется. Почему и как исправить?
Буду благодарен, если помимо решения пнете в сторону, что почитать для уяснения сути.

Answer 1

[Rsa97]

А почему просто не использовать contenteditable?

Answer 2

[Денис Букреев]

А, если не секрет, зачем такие сложные конструкции?
Почему не сделать скрытый инпут, который будет появляться при клике, а див скрываться и наоборот?

Answer 3

[lega]

jsfiddle.net/lega911/27uerrhe

Comments

[lega]

Добавил установку фокуса