JSFiddle - React, Tailwind, and code Playground

by Satpal Singh

HTML

<div>
<span class='span'>My value here!</span>

</div>

JavaScript

var focusInName = '';
var focusOutName = '';
$(function () {
    $(document).on("click", ".span", function () {
        focusInName = $(this).html();
		var input = $('<input />', {
            'type': 'text',
                'name': 'aname',
                'value': $(this).html(),
                'class': 'input'
        });
		input.focus();
        $(this).parent().append(input);
        $(this).remove(); 
        alert(focusInName);
    });

    $(document).on('blur', ".input", function () {
		focusOutName = $(this).val();
		var span = $(
            '<span />', {
            'class': 'span',
                'html': $(this).val()
        });
		
        $(this).parent().append(span);
        $(this).remove();        
        alert(focusOutName);
    });
});