CODEWITHSUNDEEP
javascriptjqueryhtml
Lui
Lui

Reputation: 764

Editable div for comments

I need to make comments on my website. I want to edit this comments dynamically. I mean, that now I have my comment in div. After click on "Edit" span, I want to change this div to editable textarea, which after modification will be able to send. So after send I need to back to show this new comment in div.

How I can achieve this?

Here is the http://jsfiddle.net/4d56n5h4/

Upvotes: 0

Views: 373

Answers (3)

Woodrow Barlow
Woodrow Barlow

Reputation: 9047

There is actually a CSS-only solution, but it is not recommended. I am going to provide it simply for curiosity's sake, and to demonstrate the diversity of solutions available. It involves invoking a property which is supported by mozilla/chrome/safari, but for which official induction to the CSS3 standard never happened: the user-modify property.

In my example, the content of a div becomes editable when clicking on a checkbox. This supports full rich-text paste.

I'm also using an attribute selector to determine when the checkbox is checked, and an adjacent sibling selector to then apply the property in question.

Here is a jsFiddle example that includes some extra styling. Below is the bare-bones example.

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>

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

UPDATED:

do you mean like 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);
});

you can save the comment on the blur event of .commentDescription

Upvotes: 1

Ragnar
Ragnar

Reputation: 4578

Try setting a contenteditable property to true

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

If you use jQuery, for editing:

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

for removing edition: 

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

Upvotes: 0

Related Questions