Live Remaining and Character counter with Vue.js

The live character counter is very useful when it needs to validate the user from entering more input or display warning message.

Character count visible on the screen while inputting character in the input box.

This notifies the user how many characters are left or the total number of characters is been entered.

In the tutorial, I show how you can count the total and remaining characters using Vue.js.

Download

Character counter
Remaining characters
Conclusion

1. Character counter

HTML

Create a <textarea> where define v-model='message' and @keyup='charCount()'.

Display character count using {{ totalcharacter }} in <span>.

Script

Define two data variable –

message – Use in <textarea>.
totalcharacter – Set value 0. Use in <span>.

Create a single method –

charCount – Assign this.message length to this.totalcharacter.

Completed Code

<!doctype html>
<html>
 <head>
   <script src='https://cdn.jsdelivr.net/npm/vue'></script>
   <style>
   textarea{
     width: 300px;
     height: 100px;
   }
   </style>
 </head>
 <body>
 
   <div id='myapp'>
 
     <textarea v-model='message' @keyup='charCount()' ></textarea>
     <br/>
     <span>{{ totalcharacter }} characters</span>
   </div>

   <!-- Script -->
   <script>
   var app = new Vue({
     el: '#myapp',
     data: {
       message: "",
       totalcharacter: 0
     },
     methods: {
       charCount: function(){

         this.totalcharacter = this.message.length;

       }
     }
   })
   </script>
 </body>
</html>

Output

Enter some text in the input box.

2. Remaining characters

HTML

Create a <textarea> where define v-model='message' and @keyup='remaincharCount()'.

Display remaining character using {{ remaincharactersText }} in <span>.

Script

Define three data variable –

message – Use in <textarea>.
maxcharacter – Set value 140.
remaincharactersText – Use this to display a message in <span>.

Create a single method –

remaincharCount – Check this.message length is greater than this.maxcharacter or not.

If it is greater then assign Exceeded length message in this.remaincharactersText otherwise get the remaining character count by subtracting this.maxcharacter - this.message.length and use in the Remaining character message.

Completed Code

<!doctype html>
<html>
 <head>
   <script src='https://cdn.jsdelivr.net/npm/vue'></script>
   <style>
   textarea{
     width: 300px;
     height: 100px;
   }
   </style>
 </head>
 <body>
 
   <div id='myapp'>
     <textarea v-model='message' @keyup='remaincharCount()'></textarea>
     <br>
     <span>{{ remaincharactersText }}</span>
   </div>

   <!-- Script -->
   <script>
   var app = new Vue({
     el: '#myapp',
     data: {
       message: "",
       maxcharacter: 140,
       remaincharactersText: "Remaining 140 characters."
     },
     methods: {
       remaincharCount: function(){

         if(this.message.length > this.maxcharacter){
           this.remaincharactersText = "Exceeded "+this.maxcharacter+" characters limit.";
         }else{

           var remainCharacters = this.maxcharacter - this.message.length;
           this.remaincharactersText = "Remaining " + remainCharacters + " characters.";

         }
 
       }
     }
   })

   </script>
 </body>
</html>

Output

Enter some text in the input box.

3. Conclusion

Define keyup event on the input element and count the length of the input value. For the remaining character count just subtract the total character with max character.

If you found this tutorial helpful then don't forget to share.

Contents

1. Character counter

2. Remaining characters

3. Conclusion