This component is a simple jQuery function that adds a character counter to a form field. The function takes a single parameter - the character limit of the specified form element.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Character Count using jQuery</title> | |
</head> | |
<body> | |
<header> | |
<h1>Character Count using jQuery</h1> | |
</header> | |
<main> | |
<textarea class="countMe"></textarea> | |
</main> | |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> | |
<script src="character-counter.js"></script> | |
<script> | |
$( '.countMe' ).characterCount( 250 ); | |
</script> | |
</body> | |
</html> |
// Append a character count element in the DOM. | |
$.fn.characterCount = function(max) { | |
if (this.val() == undefined) { return false; } | |
// Calculate remaining characters based on the initial value of the field. | |
var remaining = max - this.val().length; | |
// Display initial remaining character count message. | |
this.after( | |
'<div class="characterCount">' + | |
'(<span>' + remaining + '</span> characters remaining)' + | |
'</div>'); | |
// Set the max length of the text area. | |
this.attr('maxlength', max); | |
// Keyup event to update remaining character count message. | |
var parent = this.parent(); | |
this.keyup(function() { | |
var remaining = max - $(this).val().length; | |
$('.characterCount span', parent).html(remaining); | |
}) | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment