JSFiddle - React, Tailwind, and code Playground

by ilazarte

HTML

<div id="dt">
    <a href="#" tabindex="0" class="tgt">Ivan</a>
    <input type="hidden" name="firstname" class="value"/>
</div >

CSS

#dt {
    width:340px;
}

#dt a {
    display:block;
    text-decoration:none;
    color:black;
    font-family:Arial;
    font-size:12px;
    height:100%;
    background-color:orange;
}

#dt a:hover {
    background-color:blue;
    color:white;
}

/*
instead of display:none...
http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/
*/
#dt .editing {
    position:absolute;
    left:-9999px;
}

#dt .editor {
    font-family:Arial;
    font-size:12px;
    border:none;
    height:100%;
}

JavaScript

function edit(evt) {
    var w = $(this).width();
    var h = $(this).height();
    var $t = $(this);
    $t.addClass("editing").after('<input type="text" name="editor" class="editor"/>');
    
    $t.siblings(".editor")
        .width(w)
        .height(h)
        .val($t.text());
}

function keydown(evt) {
    var key = parseInt(evt.which);
    if (key != 27) {
        return;
    }
    $(".editor").remove();
    $(".editing").removeClass("editing");
}

$("#dt")
    .on("click", "a", edit)
    .on("keydown", ".editor", keydown);