JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div class="touch">If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<div>Element shortcut method for tweening the background color. Immediately transitions an Element's background color to a specified highlight color then back to its set background color.</div>
<div>Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.</div>

CSS

div {
    margin: 20px 0;
}

textarea {
    width: 100%;
}

JavaScript

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 = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    viewableText.click(divClicked);
}

jQuery.fn.extend({
  editable: function() {
    this.click(function(){
        alert();
    })
  }
});

$(document).ready(function() {
  //  $("div").click(divClicked);
    $("div").editable();
    
});