Displaying The Character Count of TextArea using JavaScript
Displaying The Character Count of TextArea using JavaScript
<div class="wrapper"> <h1>Displaying The Character Count of a Textarea</h1> <textarea name="the-textarea" id="the-textarea" maxlength="300" placeholder="Start Typin..."autofocus></textarea> <div id="the-count"> <span id="current">0</span> <span id="maximum">/ 300</span> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
There is all the HTML code for the Character Count JavaScript. Now, you can see an output with Character Count Javascript then we write javaScript for the Character Count JavaScript.
Output

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
CSS Code for Character Count
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700,300italic); *, *:before, *:after { box-sizing: border-box; } html { font-size: 100%; } body { font-family: 'Open Sans', sans-serif; font-size: 16px; background: #d0e6ef; color: #666; } .wrapper { max-width: 75%; margin: auto; } h1 { color: #555; margin: 3rem 0 1rem 0; padding: 0; font-size: 1.5rem; } textarea { width: 100%; min-height: 100px; resize: none; border-radius: 8px; border: 1px solid #ddd; padding: 0.5rem; color: #666; box-shadow: inset 0 0 0.25rem #ddd; } textarea:focus { outline: none; border: 1px solid #d0d0d0; box-shadow: inset 0 0 0.5rem #d0d0d0; } textarea[placeholder] { font-style: italic; font-size: 0.875rem; } #the-count { float: right; padding: 0.1rem 0 0 0; font-size: 0.875rem; }
CSS Updated Output
JavaScript Code For Character Count
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
$('textarea').keyup(function() { var characterCount = $(this).val().length, current = $('#current'), maximum = $('#maximum'), theCount = $('#the-count'); current.text(characterCount); /*This isn't entirely necessary, just playin around*/ if (characterCount < 70) { current.css('color', '#666'); } if (characterCount > 70 && characterCount < 90) { current.css('color', '#6d5555'); } if (characterCount > 90 && characterCount < 100) { current.css('color', '#793535'); } if (characterCount > 100 && characterCount < 120) { current.css('color', '#841c1c'); } if (characterCount > 120 && characterCount < 139) { current.css('color', '#8f0001'); } if (characterCount >= 140) { maximum.css('color', '#8f0001'); current.css('color', '#8f0001'); theCount.css('font-weight','bold'); } else { maximum.css('color','#666'); theCount.css('font-weight','normal'); } });
Final Output
Now that we have completed our javaScript section, Here is our updated output with javaScript. Hope you like the Character Count JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank You For Visiting!!!
In this post, we learn how to create a Character Count JavaScript using simple HTML & CSS, and javaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – Patrick W.