Как сделать элемент div редактируемым (например, текстовое поле, когда я нажимаю на него)?

давайте работать через него.

вы не можете сделать div редактируемым. Там нет такой вещи, как редактируемый div, по крайней мере сейчас. Поэтому проблема заключается в том, чтобы выяснить, что использовать для редактирования вместо этого. Текстовая область работает отлично. Поэтому идея заключается в том, чтобы каким-то образом получить текстовую область, где в настоящее время находится div.

вопрос в том, как и откуда мы получаем в textarea. Существуют различные способы, но один из них заключается в динамическом создании текстовой области на fly:

var editableText = $("<textarea />");

и заменить его на div:

$("#myDiv").replaceWith(editableText);

текстовая область теперь на месте. Но он пуст, и мы только что заменили div и потеряли все. Поэтому нам нужно как-то сохранить текст div. Один из способов-Скопировать текст / html внутри div перед его заменой:

var divHtml = $("#myDiv").html(); // or text(), whatever suits.

как только у нас есть html из div, мы можем заполнить textarea и безопасно заменить div на textarea. И установите фокус внутри текстового поля как пользователь может захотеть начать редактирование. Объединив всю работу до этого момента, получаем:

// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div's text
editableText.val(divHtml);
// replace the div with the textarea
$("#myDiv").replaceWith(editableText);
// editableText.focus();

это функционально, но ничего не происходит, когда пользователь нажимает div, потому что мы не устанавливали никаких событий. Давайте подведем итоги. Когда пользователь нажимает любой div $("div").click(..), мы создаем обработчик щелчка, и делаем все вышеперечисленное.

$("div").click(function() {
    var divHtml = $(this).html(); // notice "this" instead of a specific #myDiv
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
});

это хорошо, но мы хотели бы получить наш div обратно, когда пользователь щелкает или оставляет текстовую область. Там есть blur событие для формы элементы управления, которые запускаются, когда пользователь покидает элемент управления. Это может быть использовано для обнаружения, когда пользователь покидает текстовую область, и заменить обратно div. На этот раз мы делаем все наоборот. Сохранить значение из текстового поля, создать динамический див, установить его в HTML, и заменить на текстовое поле.

$(editableText).blur(function() {
    // Preserve the value of textarea
    var html = $(this).val();
    // create a dynamic div
    var viewableText = $("<div>");
    // set it's html 
    viewableText.html(html);
    // replace out the textarea
    $(this).replaceWith(viewableText);
});

все отлично, за исключением того, что этот новый div больше не будет преобразовываться в текстовую область по щелчку мыши. Это недавно созданный div, и нам придется настроить click снова событие. Мы уже есть весь код, но лучше, чем повторять его дважды, лучше сделать из него функцию.

function divClicked() {
    var divHtml = $(this).html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

поскольку вся операция является двусторонней обратимой, нам нужно будет сделать то же самое для текстовой области. Давайте преобразуем это в функцию тоже.

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    $(viewableText).click(divClicked);
}

---

жгут все вместе, у нас есть 2 функции divClicked,editableTextBlurred и строка ниже запускает все:

$("div").click(divClicked);

проверьте этот код на http://jsfiddle.net/GeJkU/. Это не лучший способ написания редактируемых divs любыми средствами, но только один способ начать и приблизиться к решению шаг за шагом. Честно говоря, я узнал так же много, как и вы, написав эту длинную пьесу. Прощай, адиос!