JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id="subject" contenteditable></div>

CSS

#subject { 
    width: 175px;
    border: 1px dashed black; 
}

JavaScript

var subject = document.getElementById("subject");

subject.addEventListener("keypress", function(event) {
    var typed = this.textContent.trim();
    // replace 13 with constant event.DOM_VK_ENTER
    if (event.keyCode === 13 || typed.length > 40) {
        event.preventDefault();
    }
}, false);

subject.addEventListener("input", function(event) {
    var typed = this.textContent.trim();
    this.textContent = typed.slice(0, 39);
}, false);