Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Word Counter for Elementor form

I am trying to adapt a character counter to a word counted but with a space split that quits allowing type at the limit. I am using it with an Elementor form textarea. It works all the way until you get to 50 words and then everything disappears except for 50 characters. Not sure what I am doing wrong and too new to javascript to see the issue myself. Any help appreciated.

    // #form-field-custom_essay
// #word_counter
var textInput = document.querySelector("#form-field-custom_essay");
var wordCounter = document.querySelector("#word_counter p");
var wordLimit = 50;

wordCounter.innerText = wordLimit + " Words Remaining";

textInput.addEventListener("keyup", function(){
    
    var words = textInput.value.split(" ");
    wordCounter.innerText = (wordLimit - words.length) + " Words Remaining";
    
    if(words.length >= wordLimit) {
        words = words.substring(0, wordLimit);
        wordCounter.innerText = "0 Words Remaining";
        wordCounter.style.color = "red";
    } else {
        wordCounter.style.color = null;
    }
  
});
Tags:

2

Answers


  1. 0

    you can do that…

    PS wordLimit = 4 for quick testing

    const wordCounter = document.querySelector('p#word-counter span')
  ,   textInput   = document.forms['my-form'].theTextArea
  ,   wordLimit   = 4 // or 50 
  ;
textInput.value         = ''
wordCounter.textContent = wordLimit

textInput.oninput =_=>  // use input event, not keyup event
  {
  let wordsArray = textInput.value.trim().split(/s+/)        // array containing all textInput [real] words

  while (wordsArray.length > wordLimit )
    {
    let wrd = wordsArray.pop()                  // get last word
      , pos = textInput.value.lastIndexOf(wrd)  // find it in textarea
      ;
      textInput.value = textInput.value.substring(0, pos)   // trunc it in textarea
    }
  wordCounter.style.color = (wordsArray.length < wordLimit) ? null : 'red'
  wordCounter.textContent = wordLimit - wordsArray.length
  }
    <form name="my-form">
  <textarea name="theTextArea" cols="30" rows="10" placeholder="type your text"></textarea>
  
  <!-- /.../ -->
</form>

<p id="word-counter"><span>0</span> Words Remaining</p>
    Login or Signup to reply.
  2. 0

    substring function extracts characters, not words. You can try to disable typing on the textarea if the limit is reached.

    textInput.addEventListener("keypress", function(e){
    
    var words = textInput.value.split(" ");
    wordCounter.innerText = (wordLimit - words.length) + " Words Remaining";
    
    if(words.length > wordLimit) {
       e.preventDefault()
        wordCounter.innerText = "0 Words Remaining";
        wordCounter.style.color = "red";
    } else {
        wordCounter.style.color = null;
    }
  
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search