How to display characters remaining for Textbox?

Question

I am wanting to implement a simple textbox in my code that only allows a maximum of 150 characters. That part was relatively easy. Now, how would I be able to show how many characters are remaining left in my textbox?

Example:

<textarea  maxlength="150" rows="5" cols="50" wrap="hard">
    In 150 characters or less, tell me something about yourself...
</textarea>

By writing JS code counting the characters already typed then subtracting that from the `maxlength`. — nicholaswmin, Sep 19 '18 at 15:00
There are `150 - textarea.value.length` characters remaining. — somethinghere, Sep 19 '18 at 15:02
this has already been answered here : [count text area](https://stackoverflow.com/questions/14086398/count-textarea-characters) — Tobi Owolawi, Sep 19 '18 at 15:12

score 3 · Accepted Answer · answered Sep 19 '18 at 15:03

3

You could attach input event to your textarea then every time the user types or remove a character you could perform the (max - current_characters) operation and show the result in a span :

var max = 150;
var textarea = document.querySelector('textarea');
var info = document.querySelector('#info');

//Init the count for the first time
info.textContent = max - textarea.value.length;

textarea.addEventListener('input', function() {
  info.textContent = max - this.value.length;
})

<textarea maxlength="150" rows="5" cols="50" wrap="hard">

In 150 characters or less, tell me something about yourself...

</textarea>
<br> Remaining <span id="info"></span> characteres

answered Sep 19 '18 at 15:03

Zakaria Acharki

66,747
15
75
101

Thank you! I did not know how to approach this at all. I am new to JavaScript, so I literally had no idea where to begin. How did you know to use ".addEventListener"? I didnt even know that existed. – Sep 19 '18 at 15:25
1

You're welcome brother, don't worry you've just read or watch tutorial videos, you will find `addEventListener` & all the events under the events section when you learn Javascript. – Zakaria Acharki Sep 19 '18 at 15:43
Awesome! Thank you again! Greatly appreciate the feedback! – Sep 19 '18 at 16:18

XaelGa · Answer 2 · 2018-09-19T15:19:33.367

Get the box value and rest it from the maxlength you have:

 let message = document.getElementById('messageBox').value;
 let value =  150;
 var length = value - message;

Use the length variable whatever you want.

Here is an example I made time ago to even change its colors and determine with a regular expression if there is blank spaces:

 // Reads the text area value.
 let message = document.getElementById('messageBox').value;

if((character.length <= 0 || !(/[^\s]/.test(message))) && character.length <= 280){
 // Disables submit button.
 sumbitStatus(true);
 // Sets invisible the message of more than 280 characters.(In case the user select and delete the whole message in one move).
 document.querySelector('.advertisement').style.display =  "none";
 // returns counter to blue color.(In case the user select and delete the whole message in one move).
 document.querySelector('.character').style.color = '#1EAEDB';
 } else if(character.length >= 281){
   // Disables submit button and changes counter to red.
   sumbitStatus(true); 
   document.querySelector('.character').style.color = 'red';
   // Set visible the message of more than 280 characters.
   document.querySelector('.advertisement').style.display = 'block';
  } else{
     // Enables Submit button and returns counter to blue color.
     sumbitStatus(false); 
     if(character.length >= 250){
     document.querySelector('.character').style.color = 'orange';
     // Sets invisible the message of more than 280 characters.
     document.querySelector('.advertisement').style.display = "none";
     }
     else{
     document.querySelector('.character').style.color = '#1EAEDB';
     // Sets invisible the message of more than 280 characters.
     document.querySelector('.advertisement').style.display = "none";
     }
    }  
   }

You are a bit "over-answering". Keep your answer to the minimum, the logical part. Let OP deal with the design, and it will improve readability. — Seblor, Sep 19 '18 at 15:07
This answer made me laugh. Not because of the content, but the approach. You have `customers` and `developers`. And the latter usually try to think before the customer changes his mind. — Sparky, Sep 19 '18 at 15:10

How to display characters remaining for Textbox?

2 Answers2