javascript - 如何使div中的某些文本内容在点击时可编辑？

Question

当我们点击 div 时，我想要一个可编辑的编辑框，因为我们通过点击“Div editable”来完成它。它对单个 id 非常有用。你能告诉我如何为多个 id 制作它吗？提前谢谢。

<table>
    <tr>
       <td>
          Editable Div (double click text to the right, to enter edit mode)  :   
       </td>
       <td>
         <div id="makeEditable">Div editable</div>
       </td>
   </tr>
</table>

(function($) {
$.fn.editable = function() {
    var textBlock = $(this);
    // Create a new input to allow editing text on double click
    var textBox = $('<input/>');
    textBox.hide().insertAfter(textBlock).val(textBlock.html());

    // Hiding the div and showing a input to allow editing the value.
    textBlock.dblclick(function() {
        toggleVisiblity(true);
    });
    // Hiding the input and showing the original div
    textBox.blur(function() {
        toggleVisiblity(false);
    });

    toggleVisiblity = function(editMode) {
        if (editMode == true) {
            textBlock.hide();
            textBox.show().focus();
            // workaround, to move the cursor at the end in input box.
            textBox[0].value = textBox[0].value;
        }
        else {
            textBlock.show();
            textBox.hide();
            textBlock.html(textBox.val());
        }
    };
};

})(jQuery);
$(function() {
    var $edit = $('#makeEditable').editable();
});

Answer 1

您可以使用 contenteditable="true"

来简化事情

Working Example

基本功能

<div id="makeEditable" contenteditable="true">Div editable</div>

可选地添加一些 css 以使其更加用户友好

#makeEditable:focus{
    box-shadow: 0 0 2px blue;
}

MDN Documentation for Content Editable