JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<textarea id="inpt" type="text" class="txt">ffwefefa</textarea>
<div id="inpt-width"></div>
<input type="button" id="maria" value="TESTE"/>

CSS

textarea{
    width:50px;
    overflow: hidden;
    white_space: nowrap;
}

#inpt
{
    resize: none;
}

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 = $('<div>').appendTo(document.body);
    
    $.fn.textWidth.fakeEl.css("position", "fixed");
    $.fn.textWidth.fakeEl.css("left", "100px");
    $.fn.textWidth.fakeEl.css("top", "100px");
    var origText = text || this.val() || this.text();
    
     //alert(origText.charCodeAt(origText.length-1));
    //origText=origText.trim();
    if ((origText.length>0)&&(origText[origText.length-1]=='\n'))
    {
        origText+="A";
        //alert("aaa");
    }
        
    
    var find = '\n';
	var re = new RegExp(find, 'g');
	var resText = origText.replace(re, "<br>");
    var find = ' ';
	var re = new RegExp(find, 'g');
	var resText = resText.replace(re, "&nbsp;");
    
    
    $.fn.textWidth.fakeEl.html(resText).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl[0].getBoundingClientRect();
};

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


$(function(){
	$("#maria").click(function(){ alert($("#inpt").val()[9].charCodeAt(0)); });
})