Live Remaining and Character counter with Vue.js

The live character counter is very useful when need 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 that how many characters are left or the total number of characters is been entered.

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

Live Remaining and Character counter with Vue.js


Contents

  1. Character counter
  2. Remaining characters
  3. 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 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 message in <span>.

Create 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 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 remaining character count just subtract the total character with max character.

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

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *