Dynamic Character Counter

Showcase
1

Dynamic character counter. Make sure to update the field ID (can be pulled from inspect element).

image
image846×168 7.76 KB

TB.render('component_3', function (data) {
  // Select the textarea element by its ID
  const textarea = document.getElementById('fieldka6jM4MQ75');
  
  if (textarea) {
    // Create a container for the character counter
    const charCounter = document.createElement('div');
    charCounter.id = 'charCounter';
    charCounter.style.marginTop = '5px';
    charCounter.style.fontSize = '12px';
    charCounter.style.color = '#555';
    
    // Set initial counter text
    charCounter.textContent = 'Characters entered: 0';
    
    // Append the character counter below the textarea
    textarea.parentNode.appendChild(charCounter);
    
    // Update the character counter dynamically as the user types
    textarea.addEventListener('input', function () {
      const charCount = textarea.value.length;
      charCounter.textContent = `Characters entered: ${charCount}`;
    });
  } else {
    console.warn("Textarea with ID 'fieldka6jM4MQ75' not found.");
  }
});
1 Like