JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<input id="inpt" type="text" class="txt" value="kkkkkkk">
<div id="inpt-width"></div>

CSS

input{
    width:50px;
}

JavaScript

//Input com uma width defaultada por nós e ir aumentando à medida que se vai escrevendo
$.fn.textWidth = function(text, font)
{
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

$('#inpt').on('input', function()
{
    $("#inpt").css("width",$(this).textWidth()+"px");
    $('#inpt-width').html($(this).textWidth() + 'px');
}).trigger('input');