JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<div id="content"></div>
<div id="calculated"></div>
<div id="rendered"></div>
<br />
<input/>

<textarea style="height: 80px"  class="my_class" onchange="myUpdate()" oninput="myUpdate()" id="ta">Hello az</textarea>

CSS

.my_class{
    font: 15px Arial ;
    white-space: nowrap;  
   
};

.textDimensionCalculation {
    position: absolute;
    visibility: hidden;
    height: auto;
    white-space: nowrap;

    
}

JavaScript

calculateTextAreaEdgeOK = function(text, classes, escape) {
    classes = classes || [];

    if (escape === undefined) {
        escape = true;
    }

    classes.push('textDimensionCalculation');

    var div = document.createElement('div');
   div.setAttribute('class', classes.join(' '));

    if (escape) {
        $(div).text(text);
    } else {
        div.innerHTML = text;
    }

    document.body.appendChild(div);

    var dimensions = {
        width : jQuery(div).outerWidth(),
        height : jQuery(div).outerHeight()
    };

    div.parentNode.removeChild(div);

    return dimensions;
};
myUpdate = function (){
var dimensions = calculateTextAreaEdgeOK(document.getElementById("ta").innerHTML,['my_class']);

$("#calculated").html('Calculated width ' + dimensions.width);

 document.getElementById("rendered").innerHTML="scroll height: " + document.getElementById("ta").scrollHeight;

//$("#rendered").html("element text width "+ document.getElementById("ta").width());
};
myUpdate();