JSFiddle - React, Tailwind, and code Playground

[TCRO] Limit the number of the lines in textareastj

by Lardpower

HTML

<textarea id="t" style="resize: none; width: 100px; font-size: 11px; line-height: 13px; margin: 0; padding: 0"></textarea>

<div id="test"></div>

<div id="log"></div>

<canvas id="myCanvas"></canvas>

CSS

#test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: pre;
    font-size: 11px; 
    line-height: 13px; 
    margin: 0; 
    padding: 0
}

JavaScript

$('#t').on('keyup', function(e){
  var fontSize = 11;
  $('#test').html($(this).val());
  
  // $(this).get(0).style.fontSize = fontSize;
  
  
  var height = ($('#test').get(0).clientHeight + 1) + "px";
  var width = ($('#test').get(0).clientWidth + 1) + "px"
  
  $('#log').html('width: ' + width + ', height: ' + height + ', val:!' + $('#t').val() + '!');
});

/*
var c = document.getElementById("myCanvas");
var ctx= c.getContext("2d");
ctx.font="11px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);
*/