评论的可编辑div

问题描述：

我需要在我的网站上发表评论。我想动态地编辑这些评论。我的意思是，现在我有我的评论在div。点击“编辑”跨度后，我想将此div更改为可编辑的textarea，修改后可以发送。所以发送后我需要回来显示这个新的评论在div中。评论的可编辑div

我该如何做到这一点？

答

更新：

你的意思是像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

OOo的感谢！很好，但你也可以告诉我如何点击进入按钮后激活这种模糊？或者更好的解决方案将更改编辑跨度到保存。我的意思是，首先我们点击“编辑”，现在“编辑”更改“.commentDescription”属性为true，“编辑”为“保存”选项。你能帮我解决这个问题吗？ – Lui 2014-10-01 17:52:34

再次检查答案 – 2014-10-01 17:58:01

你是最棒的！：D – Lui 2014-10-01 18:03:28

答

尝试contenteditable属性设置为true

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

如果你使用jQuery，编辑：

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

去除版：

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

答

模糊事件的评论确实有一个唯一的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>

相关推荐