JSFiddle - React, Tailwind, and code Playground

by Per Ă…strand

HTML

<textarea class="limit" rows="10">
ds kdskd msakdm kasmdk asfknask dsmakd asknfkasm dkasmdkas knafckasnksam kdmkasnd kasmckasmc kasmk dnsakcnkasmxksa cnksam xckasncskamxckascnaskcaksmdxkasmcksam kcmk samckmsa kcmsa
dasd asd sda dmkasd
d sakmdk asd
asd mkasmd asdasd
</textarea>

CSS

.limit {
  max-width: 300px;
  min-width: 300px;
  resize: none;
  overflow: hidden;
}

JavaScript

$(function(){
	$(".limit").on("input", function(evt) {
  	var $limit = $(this);
    var limit = this;
    if($limit.innerHeight() !== limit.scrollHeight) {
    	$limit.val($limit.data("before"));
    	evt.preventDefault();
      return false;
    } else {
    	$limit.data("before", $limit.val());
    }
  }).each(function(index, el) {
  	$(el).data("before", $(el).val());
  });
});