JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="editable">this is editable div</div>

JavaScript

$(function ()
{
        $('.editable').txtEdit();
});
    
(function($){
    $.fn.txtEdit = function() {
        var editable = $(this);
        
        $(editable).live('click', 
            function ()
            {
                var txt = $('<div>').attr('class', 'txtEdit div');
                var inp = $('<input>').attr({'class':'txtEdit txt', 
                                'type':'text'})
                            .val($(this).html()).blur(function (){
                                    if($(this).val().length != ''){
                                        $(txt).replaceWith($(editable)
                                            .html($(this).val()));
                                    }
                                    else{ alert("Cannot contain empty value!")}
                                }).keydown(function (e){
                                        if(e.keyCode == 13 || e.keyCode == 9){
                                            e.preventDefault();
                                            $(this).trigger('blur');
                                        }
                                }).appendTo($(txt));//.focus();
                $(this).replaceWith(txt);
                inp.focus();                      
            }
        );
    };
})(jQuery);