console
$(document).ready(function() {
var maxLength = $('#comments').attr('maxLength');
$('textarea').keyup(function() {
var inputLength = $(this).val().length;
var remainLength = maxLength-inputLength;
$('#charCount').text(remainLength);
});
});
<div class='textArea__wrapper'>
<label class='fieldLabel ' for='comments'>Anything else you'd like us to know?</label></br>
<textarea id='comments' name="comments" rows='5' placeholder='Maximum 500 characters'
class='comments'
maxLength='500'></textarea>
<div aria-live='polite' aria-atomic='true' class="counter__Wrapper"><span id="charCount">500</span> <span class='invisibleTxt'>characters remaining</span></div>
</div>
.textArea__wrapper{
position: relative;
display: inline-block;
}
.comments {
width: 300px;
height: 200px;
resize: none;
}
.counter__Wrapper{
position: absolute;
right: 0;
bottom: 8px;
}
.invisibleTxt{
position: absolute;
left: -999em;
}