JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<div id="content"></div>
<div id="calculated"></div>
<div id="rendered"></div>
<div id="rendered2"></div>

<br />
<textarea style="height: 80px; width:500px;"  class="my_class" onpropertychange="myUpdate()" oninput="myUpdate()" id="ta">987</textarea>

CSS

.my_class{
    font:12px Arial ;
    white-space: wrap;
}
.textDimensionCalculation {
    position: absolute;
    visibility: hidden;
    height: auto;
  
    white-space: wrap;
}

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 myText = $( "#ta" ).val();

var dimensions = calculateTextAreaEdgeOK(myText,['my_class']);

$("#calculated").html('Calculated width ' + dimensions.width);
document.getElementById("rendered").innerHTML='Scroll height' +document.getElementById("ta").scrollHeight;

$("#rendered2").html("textarea scrollwidth "+ document.getElementById("ta").scrollWidth);
};
myUpdate();
;