Javascript 用于注释的可编辑div

我需要在我的网站上发表评论。我想动态编辑这些评论。我的意思是，现在我在div中有了我的评论。单击“编辑”span后，我想将这个div更改为可编辑文本区域，修改后可以发送。所以在发送之后，我需要返回以在div中显示这个新注释

我怎样才能做到这一点

---

以下是

尝试将

contenteditable

属性设置为

true

<div id="comment" contenteditable="true"></div>

要删除版本，请执行以下操作：

$('#comment').removeAttr('contenteditable');

---

更新：

你是说像

$('.commentEdit').click(function(){
    if($(this).text()=='Edit'){ $(this).parent().prev('.commentDescription').prop('contenteditable',true);
        $(this).parent().prev('.commentDescription').focus();
        $(this).text('Save');
    }
    else{
        $(this).text('Edit');
        //code to save the comment
    }
});
$('.commentDescription').blur(function(){
    $(this).prop('contenteditable',false);
});

---

您可以保存有关

模糊事件的注释。commentDescription

实际上只有CSS解决方案，但不推荐使用。出于好奇，我将提供它，并展示可用解决方案的多样性。它涉及调用mozilla/chrome/safari支持的一个属性，但从未正式引入CSS3标准：属性

在我的示例中，当单击复选框时，div的内容将变得可编辑。这支持全文粘贴

我还使用来确定何时选中复选框，然后使用来应用有问题的属性

是一个包含一些额外样式的JSFIDLE示例。下面是一个简单的例子

input[type=checkbox]：选中+内容{
用户修改：读写；
-moz用户修改：读写；
-webkit用户修改：读写；
}

编辑
这是内容，仅当选中上面的复选框时才可编辑。

Ooo谢谢！很好，但是你能告诉我在点击“回车”按钮后如何激活这个模糊吗？或者更好的解决方案是将“编辑范围”更改为“保存”。我的意思是，首先单击“编辑”，然后单击“编辑”，将“.commentDescription”的属性更改为true，“编辑”变成“保存”选项。你能帮我吗？再看看答案还有一件事。。。如何设置焦点，直到单击保存？我想在保存更改后失去焦点…不是这个，我知道的这个。我指的是当“.commentDescription”成为焦点时的蓝色框-它向我们显示此字段处于活动状态。@Lui您不能强制它保持焦点，这将阻止与页面上的其他元素交互。不过，您可以应用一些样式，如背景色和边框，使其看起来像文本字段。您看到的蓝色框架由浏览器完成。

$('.commentEdit').click(function(){
    if($(this).text()=='Edit'){ $(this).parent().prev('.commentDescription').prop('contenteditable',true);
        $(this).parent().prev('.commentDescription').focus();
        $(this).text('Save');
    }
    else{
        $(this).text('Edit');
        //code to save the comment
    }
});
$('.commentDescription').blur(function(){
    $(this).prop('contenteditable',false);
});