JSFiddle - React, Tailwind, and code Playground
HTML
<textarea name="post"></textarea>
<div class="character-count">You have <span class="characters-remaining">0</span> of <span class="allowed-characters">0</span> characters remaining</div>
<button class="submit">Submit post</button>
<hr>
Just for demo purposes, fill in the maximum amount of characters: <input type="text" name="characters-allowed" value="5000">
CSS
.character-count.overflow { color: red; }
JavaScript
jQuery(document).ready(function ($) {
// Calculate remaining characters
function charactersRemaining() {
var charactersAllowed = $('input[name="characters-allowed"]').val();
return {
allowed: charactersAllowed,
remaining: charactersAllowed - $('textarea[name="post"]').val().length
};
};
// Do stuff when calculated the characters
function updateCharacterCount() {
var characterCount = charactersRemaining();
// Update notifiers
$('.characters-remaining').text(characterCount.remaining);
$('.allowed-characters').text(characterCount.allowed);
// Update properties and classes
if( characterCount.remaining < 0 ) {
$('button.submit').prop('disabled', true);
} else {
$('button.submit').prop('disabled', false);
}
if( characterCount.remaining <= 0 ) {
$('.character-count').addClass('overflow');
$('textarea[name="post"]').addClass('limit');
} else {
$('.character-count').removeClass('overflow');
$('textarea[name="post"]').removeClass('limit');
}
};
// Register events for form fields
$('textarea[name="post"], input[name="characters-allowed"]').on('keyup', function() {
updateCharacterCount();
});
// As a little extra disallow typing of extra characters
$('body').on('keydown', 'textarea[name="post"].limit', function(e) {
var keyCode = e.keyCode || e.which;
if( keyCode !== 8 && keyCode !== 46 ) { // allow backspace and delete button
e.preventDefault();
}
});
// initialize
updateCharacterCount();
});