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

Ответ 1

Пусть работает через него.

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

Вопрос в том, как и откуда мы получаем текстовое поле. Существуют разные способы, но один из них - динамически создавать текстовое поле "на лету":

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

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

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

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

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

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

// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div 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. На этот раз мы делаем точный оборот. Сохраните значение textarea, создайте динамический div, установите его html и замените текстовое поле.

$(editableText).blur(function() {
    // Preserve the value of textarea
    var html = $(this).val();
    // create a dynamic div
    var viewableText = $("<div>");
    // set it 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/. Это не лучший способ записи редактируемых разделов любыми способами, а всего лишь один способ начать и подойти к решению шаг за шагом. Честно говоря, я узнал так же, как и вы, написав эту длинную пьесу. Отправляемся, адио!

Ответ 2

Для div вы можете использовать этот атрибут HTML, чтобы сделать его доступным для редактирования:

<div contenteditable="true">Anything inside this div will be editable!</div>

Дополнительная информация здесь: http://html5demos.com/contenteditable

Надеюсь, что это поможет.

Ответ 3

Используйте атрибуты contenteditable="true" для деления.

Ответ 4

Основываясь на ответе Анурага, я написал небольшой плагин jquery:

https://github.com/zevero/jquery-html-editable

который позволяет вам редактировать все элементы div.myDiv:

$('body').html_editable('div.myDiv');

Ответ 5

Для тех, кто ищет версию on(), это основано на ответе Анурага.

Если по какой-то причине вы хотите удалить событие щелчка с редактируемого ввода текста (например, для просмотра редактируемых и не редактируемых версий контента), вы можете впоследствии применить $(document).off("click", ".editable_text");.

$(document).on("click", ".editable_text", function() {
  var original_text = $(this).text();
  var new_input = $("<input class=\"text_editor\"/>");
  new_input.val(original_text);
  $(this).replaceWith(new_input);
  new_input.focus();
});

$(document).on("blur", ".text_editor", function() {
  var new_input = $(this).val();
  var updated_text = $("<span class=\"editable_text\">");
  updated_text.text(new_input);
  $(this).replaceWith(updated_text);
});

.text_editor {
  border: none;
  background: #ddd;
  color: #000;
  font-size: 14px;
  font-family: arial;
  width: 200px;
  cursor: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="editable_text">Here is my original text.</span>
</p>

Ответ 6

contenteditable имеет некоторые серьезные недостатки. Самое ужасное, на мой взгляд, кросс-браузерная несовместимость при использовании Enter. Смотрите описание article для описания. В Firefox, нажав Enter для возврата каретки, создается новый абзац, эффективно удваивая интервалы между каждой строкой, которая недостаточно длинна для обертывания. Очень уродливый.