JSFiddle - React, Tailwind, and code Playground
HTML
<textarea></textarea>
<p></p>
CSS
textarea {width: 80%;height: 200px;}
JavaScript
var area = document.querySelector("textarea"),
note = document.querySelector("p");
var max = 10;
function limit(e){
var v = area.value.replace(/\s+/g, " ").trim(),
l = (!v.length) ? 0 : v.split(" ").length;
if (l >= max) {
if (e.keyCode == 32)
e.preventDefault();
area.value = v.split(" ").slice(0, max).join(" ");
note.innerHTML = "Limite atteinte";
}else
note.innerHTML = max-l + " mots " + (l ? "restants" : "max");
}
area.addEventListener("focus", limit, false);
area.addEventListener("keydown", limit, false);
area.addEventListener("keyup", limit, false);
window.addEventListener("load", limit, false);