JSFiddle - React, Tailwind, and code Playground

by Leonid Artemev

HTML

<textarea id= 'yourtextarea' wrap="off">test</textarea>

CSS

textarea{
    width:100px;
    height: 100px;
}

JavaScript

var array = [];

$('#yourtextarea').bind('input', function(event) {
    //Option 1: Limit to # of rows in textarea
    //rows = $(this).attr('rows');
    //Optiion 2: Limit to arbitrary # of rows
    
    var paddingLeft = parseInt(window.getComputedStyle(this, null).getPropertyValue('padding-left'),10);    
    var paddingRight = parseInt(window.getComputedStyle(this, null).getPropertyValue('padding-right'),10);
    var border = parseInt(window.getComputedStyle(this, null).getPropertyValue('border'),10);
    var width = parseInt(window.getComputedStyle(this, null).getPropertyValue('width'),10);
    var height = parseInt(window.getComputedStyle(this, null).getPropertyValue('height'),10);
    var maxLineWidth = paddingLeft + paddingRight + width;
    
    var carretPosition = this.selectionStart;
    var value = this.value;
    var length = this.value.length;
    console.log('carret', carretPosition);
    console.log(paddingLeft, paddingRight, border, width, height, maxLineWidth);
    
    array = this.value.split("\n");
    
    if(this.scrollWidth> maxLineWidth){
        console.log('oversize');
        console.log('larg: ' + getLargestString(array));
    
        
        //console.log('value: '+ this.value);
        var prefix = this.value.substring(0, length -2);
        var suffix = this.value.substring(length -2, length);
        console.log('pos & len' +carretPosition, length);
        if(carretPosition==length){
            carretPosition += 1;       
        } else {
               
        }       
        
        console.log('pref: '+prefix);
        console.log('suff: '+suffix);
        this.value = prefix +'\n'+ suffix;
        this.setSelectionRange(carretPosition,carretPosition);
        
    }
    
    
    rows = 3;

    var value = '';
    var width = this.scrollWidth;
    var splitval = $(this).val().split("\n");
    //console.log('split',splitval);
    console.log('width', width);
    //if(width){}

//    for(var a=0;a<rows && typeof...