JSFiddle - React, Tailwind, and code Playground

by popsyjunior

HTML

<textarea id="descrip"></textarea>

CSS

.hide{
    visibility:hidden;
}
#test{
    font-family: times;
    white-space: normal;                 /* CSS3 browsers  */
	white-space: -moz-normal !important; /* 1999+ Mozilla  */
	white-space: -normal;                /* Opera 4 thru 6 */
	white-space: -o-normal;              /* Opera 7 and up */
	word-wrap: break-word;                 /* IE 5.5+ and up */
	overflow: auto !important;               /* Firefox 2 only */
    width:100px;
    font-size: 12px;
}
#descrip{
    font-family: times;
    font-size: 12px;
    height:115px;
    width:100px;
    overflow:hidden;
}
#message{
    color:red;
}

JavaScript

var over = false;
var num = 0;
var valid_entry = "";
$('#descrip').keyup(function(e){
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    jQuery('<div/>', {
        "class": "hide",
        text: t,
        id: "test"
    }).appendTo('body');
    var h = $('#test').height();
    $('#test').remove();
    if(h >= 100){
        num += 1;
        if(num == 1){
            var div = '<div id="message">You have run out of room</div>'
            $('body').append(div);
        }
        over = true;
    }
    else{
        over = false;
        valid_entry = t;
        if(num >= 1){
            $('#message').remove();
            num = 0;
        }
    }
    
    $(this).val(valid_entry);
});