JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<input id='text'/>
<span id='alert'></span>

CSS

#alert {
    color: #F00;
}

JavaScript

function textLength(value){
   var maxLength = 20;
   if(value.length > maxLength) return false;
   return true;
}
var oldValue = '';
var alert = document.getElementById('alert');
document.getElementById('text').onkeyup = function(){
     if(!textLength(this.value))
     {
         this.value = oldValue;
         alert.innerHTML = 'Text is too long!'
     }
     else oldValue = this.value;
}