JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<p>
<textarea id="message" cols="40" rows="8"></textarea>
</p>
<p>
<label><input type="text" id="remLen" size="3" /> remaining characters</label>
</p>
</form>
JavaScript
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) {
field.value = field.value.substring(0, maxlimit);
} else {
countfield.value = maxlimit - field.value.length;
}
}
window.onload = function() {
var ta = document.getElementById("message"),
inp = document.getElementById("remLen"),
limit = 50;
inp.value = limit;
ta.onkeyup = function() {
textCounter(this, inp, limit);
}
}