How to create JavaSctipt Realtime text counter

Javascript RealTime Text Counter

Hello friends Today we will learn how to create a rial-time text counter with javascript. This is mainly used to display how many character you have typed, but you can also do some cool thing with this method. Suppose you want to tell users how many password they have typed or tell them to type minimum a number of text you can also create a password meter with this tutorial(need some modification), the concept is more letter you typed the password is getting more harder. You can also create a typing speed counter application and lots more.

Also see : Meta Tag Generator for blog.

This is a basic javascript tutorial which is ideal for beginers.

How to Create ?

First, on a html document we will create an input tag and i will give it's id "input".
Next we will create a div tag and and give it's id 'Output'.
I want to type anything into the input and at the same time I want to show how many character I have typed. So,lets start..

<html>
 <head></head>
 
 <body>
 
  <input type="text" id="input" onkeypress="Counter()"/>
        <div id="output"></div>
 
 </body>
</html>

Now i'm creating a script tag, and also creating a function named 'Counter'.
In the function i'm adding two variables named GetText and TextLength . GetText is for getting values from input tag and TextLength will count it's length.

                <script>
            
  function Counter() {
  
     var GetText =  document.getElementById('input');
     var TextLength = (GetText.value.length);
     
  }
</script>

Now, we will print the text length on div tag using 'document.getElementById()' method.
The setTimeout() refresh the Count() function ten times within a seconds and checks how texts we have into input tag.

<script>
            
  function Counter() {
  
     var GetText =  document.getElementById('input');
     var TextLength = (GetText.value.length);
     document.getElementById('output').innerHTML ="you have typed " +TextLength + " texts";
     setTimeout("Counter()",100);
  }
</script>

Here is full code

<html>
 <head>
  <script>
   function Counter() {
     var GetText =  document.getElementById('input');
     var TextLength = (GetText.value.length);
     document.getElementById('output').innerHTML ="you have typed " +TextLength + " texts";
     setTimeout("Counter()",100);
   }
  </script>
 </head>
 
 <body>
  <input type="text" id="input" onkeypress="Counter()"/>
  <div id="output"></div>
 
 </body>
</html>