Javascript 如何使div中的某些文本内容在单击时可编辑？

我想要一个编辑框可编辑，当我们点击div，因为我们完成这一点，点击“div可编辑”。它的工作很好，为单一的身份证，你可以告诉如何使它为多个身份证。提前感谢

<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();
});

可编辑Div（双击右侧文本，进入编辑模式）：
Div可编辑
（函数（$）{
$.fn.editable=函数（）{
var textBlock=$（此）；
//创建新输入以允许双击编辑文本
变量文本框=$（''）；
textBox.hide（）.insertAfter（textBlock.val）（textBlock.html（））；
//隐藏div并显示输入以允许编辑值。
textBlock.dblclick（函数（）{
切换可视性（真）；
});
//隐藏输入并显示原始div
blur（函数（）{
切换可视性（假）；
});
toggleVisiblity=功能（编辑模式）{
if（editMode==true）{
textBlock.hide（）；
textBox.show（）.focus（）；
//解决方法，在输入框的末尾移动光标。
文本框[0]。值=文本框[0]。值；
}
否则{
textBlock.show（）；
textBox.hide（）；
html（textBox.val（））；
}
};
};
})（jQuery）；
$（函数（）{
var$edit=$（'#makeEditable'）.editable（）；
});

只需使用基本的jQuery选择器，如下所示： $（“#使可编辑，#另一个，#anidagain”）

但是，如果您想在多个div/元素上执行此操作，最好为所有元素提供一个类，并将此函数应用于具有该类的所有元素。然后，您的选择器将是：

---

$（'.editable'）

通过使用

contenteditable=“true”

基本功能

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

---

你应该稍微修改一下你的逻辑。您应该为每个div元素创建单独的输入，在事件中，您应该通过

this

对当前的dblclicked或blur元素进行操作。这里有一个小修改

---

希望对你有帮助。但我建议使用@apaul34208建议的

contenteditable

属性，除非您有其他自定义js逻辑。

使用类我尝试过，但在编辑时，它在编辑div上显示相同的数据。在所有选择器编辑上使用第一个div html。如果我们在div的数量上应用这个属性，它可以代替id用于多个类吗？@vaibhavagarwal一个属性，如

width=“”

或

style=“”

，您可以将其添加到任意数量的div中。@vaibhavagarwal就是您要找的东西？请在我单击“回复并提交”时看到这个位置。@vaibhavagarwal看起来您正在尝试设置某种形式的表单。。。您最好只使用

或

而不是使用可编辑的div。你有什么理由不这么做吗？谢谢，这就是我需要的。

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