Question

我需要在我的网站上发表评论。我想动态编辑这些评论。我的意思是，现在我在div中发表评论。点击＆＃34;编辑＆＃34; span，我想将此div更改为可编辑的textarea，修改后将能够发送。所以在发送之后我需要回来在div中显示这个新评论。

我怎么能做到这一点？

以下是 http://jsfiddle.net/4d56n5h4/

Answer 1

<强>更新：

你的意思是 THIS ？

$('.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

的模糊事件中

Answer 2

尝试将contenteditable属性设置为true

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

如果您使用jQuery进行编辑：

$('#comment').attr('contenteditable', 'true');

删除版本：

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

Answer 3

实际上只有CSS解决方案，但不建议这样做。我将仅仅为了好奇而提供它，并展示可用解决方案的多样性。它涉及调用mozilla / chrome / safari支持的属性，但是对于CSS3标准的官方归纳从未发生过：user-modify属性。

在我的示例中，单击复选框时div的内容变为可编辑。这支持完整的富文本粘贴。

我还使用attribute selector确定选中复选框的时间，然后使用adjacent sibling selector来应用相关媒体资源。

Here是一个jsFiddle示例，其中包含一些额外的样式。以下是一个简单的例子。

input[type=checkbox]:checked + .content {
    user-modify: read-write;
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
}

<input type="checkbox"> Edit

<div class="content">
    This is the content, only editable when the checkbox above is checked.
</div>

可编辑的div用于评论

3 个答案: