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


Это мой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
    </head> 
<body> 
        <style type="text/css" media="screen"> 

        </style> 

        <!--<div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>-->

        <div class=b style="width: 200px; height: 200px;background:pink;position:absolute;left:500px;top:100px;"></div>
        <script src="jquery-1.4.2.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8"> 

        </script> 
    </body> 
</html>

спасибо

8   51  

8 ответов:

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

вы не можете сделать 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 любыми средствами, но только один способ начать и приблизиться к решению шаг за шагом. Честно говоря, я узнал так же много, как и вы, написав эту длинную пьесу. Прощай, адиос!

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

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

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

надеюсь, что это помогает.

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

на основе ответа Anurag я написал небольшой плагин jquery:

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

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

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

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

если по какой-то причине вы хотите отключить событие click от редактируемого ввода текста (например, для просмотра редактируемых и не редактируемых версий контента), вы можете позже применить $(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>

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

вы можете попробовать это

 <!DOCTYPE html>
    <html>
    <body>

    <div id="myP">This is a paragraph. Click the button to make me editable.</div>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        document.getElementById("myP").contentEditable = true;
        document.getElementById("demo").innerHTML = "The p element above is now editable. Try to change its text.";
    }
    </script>

    </body>
    </html>

вот простое решение:

$('div').click(function(e){
    this.contentEditable = 'true';
});

рабочий пример в https://jsfiddle.net/pgdqhacj/2/. единственным недостатком является то, что вам нужно дважды щелкнуть, чтобы отредактировать текст, а не один клик.