JSFiddle - React, Tailwind, and code Playground

by Rachel Gallen

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="editcontent" contenteditable="true"></div>
  <span></span>

CSS

body {
    padding:10px 0 0 10px;
}

#editcontent{
  width:200px;
  height:50px;
  border:1px solid blue;
}

#editcontent:after {
      color: #999;
      content:'Enter text';
    }

JavaScript

$('#editcontent').on('keydown', function(event) {
  $('span').text('Characters entered:' + $(this).text().length);
  if($(this).text().length === 10 && event.keyCode != 8) /*delete*/ {
  	event.preventDefault();
  }
});