JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<textblock class="myClass" id="tb">asdf</textblock>
<textarea style="width: 200px" onpropertychange="myUpdate()" oninput="myUpdate()" id="ta" class="my_class">Hello World</textarea>

CSS

.myClass {
  font-size: 12px;
  color: blue
}

;

JavaScript

measureTextAreaEdgeProblem = function(pText,
        pFontSize, pWidth, pStyle) {

        var lDiv = document.createElement('textarea');
        // element.after(lDiv);
        /*
            var textAreaMeasurer = $.parseHTML("<textarea class='inputFont' style='display:none; position: fixed; left: 0px; top: 40px; white-space: pre;'></textarea>");
            element.after(textAreaMeasurer);
            var lDiv = textAreaMeasurer;
        */
        lDiv.style.visibility = "hidden";
        //  lDiv.style.display = "none";
        var intLineHeight = 100

        lDiv.classList.add("otherclass");
        document.body.appendChild(lDiv);


        if (pStyle != null) {
          lDiv.style = pStyle;
        }

        pText = pText + "WWW"; // "W" adds arbitray increase to text and therefore reduces text that will fit. Avoids varying measurement issues that could cut out saved text when changing browsers, resolution or scaling on different computers.

        lDiv.style.lineHeight = intLineHeight.toString() + 'px'; //prevents change of line height and number of lines due to font changes
        lDiv.style.fontSize = "" + pFontSize + "px";
        lDiv.style.position = "absolute";
        lDiv.style.left = -10000;
        lDiv.style.top = -10000;
        lDiv.style.fontWeight = "bold";
        lDiv.disabled = 'disabled';
        // lDiv.style.display = "none";


        lDiv.style.fontStyle = "italic"
          //lDiv.style.overflowY = "scroll";//or none  IE needs special handling.

        lDiv.style.fontFamily = 'Arial';
        lDiv.style.height = "0px";
        //      lDiv.style.display = "none";


        lDiv.innerHTML = pText;

        var divStyle = window.getComputedStyle(lDiv, null);

        var pLeft = divStyle.getPropertyValue('padding-left')
        var pTop = divStyle.getPropertyValue('padding-top')
        var pRight = divStyle.getPropertyValue('padding-right')
        var pBottom = divStyle.getPropertyValue('padding-bottom')

        // var...