rob.m rob.m - 26 days ago 12
Javascript Question

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

ram ram
Answer

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