JSFiddle - React, Tailwind, and code Playground

by blparker

HTML

<button>Text</button>

CSS

button {
    padding: 5px;
}

JavaScript

$('input').on('click', function(e) {
    console.log("### CLICK");
    event.stopPropagation();
    event.preventDefault();
    return false;
});

var $btn = $('button');
$('button').on('keypress', 'input', function(e) {
    if(e.which === 13) {
        var text = $(this).val();
        $(this).remove();
        $('button').text(text);
    }
    
    console.log("### ", this.scrollWidth, $btn.width());
    if(this.scrollWidth > $btn.width()) {
        $btn.width(this.scrollWidth);
        $(this).width(this.scrollWidth);
    }
});

$('button').on('dblclick', function(e) {
    var text = $(this).text();
    var width = $(this).width();
    var paddingLeft = $(this).css('padding-left');
    var sub = parseInt(paddingLeft, 10) * 2;
    $(this).html($('<input />').attr('type', 'text').css('width', (width - sub) + 'px').val(text));
});