評論的可編輯div

我需要在我的網站上發表評論。我想動態地編輯這些評論。我的意思是，現在我有我的評論在div。點擊「編輯」跨度後，我想將此div更改爲可編輯的textarea，修改後可以發送。所以發送後我需要回來顯示這個新的評論在div中。評論的可編輯div

我該如何做到這一點？

2014-10-01 Lui

更新：

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

來源

2014-10-01 17:42:24

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');

來源

2014-10-01 17:40:10 Ragnar

模糊事件的評論確實有一個唯一的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>

來源

2014-10-01 17:58:06

評論的可編輯div

回答

相關問題