JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
box
<div class="comment_box" contenteditable="true"></div>

CSS

* {
      box-sizing: Border-box;
      font-family: "Lucida Grande", sans-serif;
      font-size: 18px;
      border-radius: 3px;
    }
    
    .comment_box {
      overflow: hidden;
      width: 521px;
      padding: 30px;
      text-align: left;
      height: 80px;
      margin-top: 5px;
      background-color: #ffcc99;
      word-wrap: break-word;
    }

JavaScript

$(document).ready(function() {
  $(".comment_box").keydown(function(e) {
    if (e.which != 0 &&
      !e.ctrlKey && !e.metaKey && !e.altKey
    ) {
      var html_org = $(this).text();
      var html_calc = '<span>' + html_org + '</span>';
      $(this).html(html_calc);
      var width = $(this).height();
      console.log(width);
      $(this).text(html_org);
      var event = jQuery.Event("keypress");
      event.which = 35;
      event.keyCode = 35;
      if (width > 21) {
        $(this).css("padding-top", "21px");
      }
      $(".comment_box").trigger(event);
    }
  });
});