JSFiddle - React, Tailwind, and code Playground
HTML
<label>TextArea five</label>
<textarea name="fivet" id="fivet" maxlength="5"></textarea>
CSS
label{
display:block;
margin-top: 10px;
}
JavaScript
var idMaxLengthMap = {};
$(document).ready(function() {
$.each($(':text, textarea'), function() {
var id = $(this).attr('id'),
maxlength = $(this).attr('maxlength');
if ((typeof id !== 'undefined') && (typeof maxlength !== 'undefined')) {
idMaxLengthMap[id] = maxlength;
$(this).removeAttr('maxlength');
}
});
$(':text, textarea').bind('change keyup', function() {
var id = $(this).attr('id'),
maxlength = '';
if ((typeof id !== 'undefined') && idMaxLengthMap.hasOwnProperty(id)) {
maxlength = idMaxLengthMap[id];
if ($(this).val().length > maxlength) {
$(this).val($(this).val().slice(0, maxlength));
}
}
});
});