JSFiddle - React, Tailwind, and code Playground

by moob

HTML

HERE ARE SOME <div contenteditable="true" name="choice1" class="textfield" max="15">EDITABLE</div> AND NON-EDITABLE A<div contenteditable="true" name="choice1" class="textfield" max="3">RE</div>AS. <div contenteditable="true" name="choice1" class="textfield" max="30">I HAVE NO IDEA</div> WHY I'M SHOUTING!

CSS

.textfield {display:inline; color:red; text-transform:uppercase;}

JavaScript

var textfields = document.getElementsByClassName("textfield"); 
for(i=0; i<textfields.length; i++){
    textfields[i].addEventListener("keypress", function(e) {
        if(this.innerHTML.length >= this.getAttribute("max")){
            e.preventDefault();
            return false;
        }
    }, false);
}