CODEWITHSUNDEEP
javascripthtmlcss
Gauthier Buttez
Gauthier Buttez

Reputation: 1193

How to make show a character counter for several textareas in same page?

I have a HTML form with several textareas. I need to limit the number of characters for each area. I want to shouw a counter. I found this on the web:

    $('textarea').keyup(function() {
        
      var characterCount = $(this).val().length,
          current = $('#current'),
          maximum = $('#maximum'),
          theCount = $('#the-count');
        
      current.text(characterCount);
     
            
    });
    #the-count {
      float: right;
      padding: 0.1rem 0 0 0;
      font-size: 0.875rem;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

MY PROBLEM:

It works for 1 textarea but then stop to work when having several text areas. How to transform the javascript function in order to make it work for any text area and counters in the page?

Upvotes: 1

Views: 566

Answers (3)

Blu
Blu

Reputation: 4056

Multiple Textareas with different maxLength value.

id issue also resolved by making it class

Make modification from other answer.

JSFiddle

Code

HTML

  <div class="wrapper">
      <h1>Displaying The Character Count of a Textarea</h1>
  <div>
     <textarea name="textarea" maxlength="450" placeholder="Start Typin..." autofocus> </textarea>
    <div class="count">0 / 450</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="400" placeholder="Start Typin..." autofocus></textarea>
    <div class="count">0 / 400</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="500" placeholder="Start Typin..." autofocus></textarea>
    <div class="count">0 / 500</div>
  </div>
</div>

Javascript

let textareas = document.querySelectorAll('textarea');

textareas.forEach(textarea => {
  textarea.addEventListener('input', function() {
    let charCount = textarea.value.length;
    let count = textarea.nextElementSibling;
    let maxLength = textarea.maxLength;
    count.innerHTML = charCount + ' / ' + maxLength;
  })
})

Upvotes: 0

benhatsor
benhatsor

Reputation: 2033

You need to do querySelectorAll on all the inputs and then attach a oninput event listener, like this:

var textareas = document.querySelectorAll('textarea');

textareas.forEach(textarea => {
  textarea.addEventListener('input', function() {
    var charCount = textarea.value.length;
    var count = textarea.nextElementSibling;

    count.innerHTML = charCount + ' /300';
  })
})
#count {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}
<div class="wrapper">
  <h1>Displaying The Character Count of a Textarea</h1>
  
  <div>
    <textarea name="textarea" maxlength="300" placeholder="Start Typin..." autofocus></textarea>
    <div id="count">0 / 300</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="300" placeholder="Start Typin..." autofocus></textarea>
    <div id="count">0 / 300</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="300" placeholder="Start Typin..." autofocus></textarea>
    <div id="count">0 / 300</div>
  </div>
</div>

In pure Javascript.

Upvotes: 2

Rafee Shaik
Rafee Shaik

Reputation: 679

ID's should be unique. Give different id's. It will work.

CSS:

#textCount, #textCount1 {
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}

HTML:

<div class="wrapper">
    <h1>Displaying The Character Count of a Textarea</h1>
    <textarea id="textarea1" maxlength="300" placeholder="Start Typin..."></textarea>
    <div id="textCount1">
        <span id="current1">0</span>
        <span id="maximum1">/ 300</span>
    </div>

    <textarea id="textarea2" maxlength="300" placeholder="Start Typin..."></textarea>
    <div id="textCount2">
        <span id="current2">0</span>
        <span id="maximum2">/ 300</span>
    </div>
</div>

javascript:

$('#textarea1').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current1'),
      maximum = $('#maximum1'),
      theCount = $('#textCount1');
    
  current.text(characterCount);
 
        
});

$('#textarea2').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current2'),
      maximum = $('#maximum2'),
      theCount = $('#textCount2');
    
  current.text(characterCount);
 
        
});

Upvotes: 0

Related Questions