Last active
January 9, 2019 22:33
-
-
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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