CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10571

How to convert clicked element into a textarea and back?

Based on this JSFIDDLE found in this SO answer I am basically trying to achieve the same, however, my element isn't a div or could not just be a <p> tag, could be basically be any element while the code below presume it will be a <p> tag

How can i make it so that it gets back to its original element?

HTML

<p>If no background color...</p>
<span>Element shortcut method for ...</span>
<i>Element shortcut method which ...</i>

JS

    $(".modal-body div *").on("click", function(){
          divClicked();
    });
    function divClicked() {
        var divHtml = $(this).html();
        var editableText = $("<textarea />");
        editableText.val(divHtml);
        $(this).replaceWith(editableText);
        editableText.focus();
        // setup the blur event for this new textarea
        editableText.blur(editableTextBlurred);
    }

    function editableTextBlurred() {
        var html = $(this).val();
        var viewableText = $("<p>"); <-- Could have been another tag
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        // setup the click event for this new div
        viewableText.click(divClicked);
    }

Upvotes: 2

Views: 114

Answers (1)

Ram
Ram

Reputation: 504

Why can't you use contenteditable="true" for your div?

<div contenteditable="true">
  This text can be edited by the user.
</div>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Upvotes: 2

Related Questions