Skip to content

Instantly share code, notes, and snippets.

@angelsantosa
Last active January 9, 2019 22:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save angelsantosa/0870ed7b36c64134b6fb70d9e46c4d78 to your computer and use it in GitHub Desktop.
Save angelsantosa/0870ed7b36c64134b6fb70d9e46c4d78 to your computer and use it in GitHub Desktop.
A simple textarea delimiter and counter using Vanilla Javascript http://jsfiddle.net/yru532m4/
let textareas = document.querySelectorAll('.limit-text')
Array.from(textareas).forEach(el => {
let maxlength = el.getAttribute('maxlength')
el.parentNode.querySelectorAll('.count_message')[0].innerHTML = maxlength + ' remaining'
el.addEventListener('keyup', function(event) {
let length = this.value.length
let text_remaining = maxlength - length
this.parentNode.querySelectorAll('.count_message')[0].innerHTML = text_remaining + ' remaining'
})
})
<div>
<h5>
<em class="count_message"></em>
</h5>
<textarea class='limit-text' placeholder="Type in your message" rows="5" maxlength="200"></textarea>
</div>
<div>
<h5>
<em class="count_message"></em>
</h5>
<textarea class='limit-text' placeholder="Type in your message" rows="5" maxlength="600"></textarea>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment