Elementor 表单的单词计数器

Question

我正在尝试使字符计数器适应已计数的字数，但使用 space 拆分退出允许输入的限制。我将它与 Elementor 表单文本区域一起使用。它一直有效，直到你达到 50 个单词，然后除了 50 个字符之外的所有内容都消失了。不确定我做错了什么，而且对 javascript 来说太新了，我自己看不到这个问题。任何帮助表示赞赏。

    // #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;
    }
  
});

Answer 1

你可以做到...

PS wordLimit = 4 快速测试

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>

Answer 2

substring 函数提取字符，而不是单词。如果达到限制，您可以尝试禁用文本区域的输入。

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;
    }
  
});

Elementor 表单的单词计数器

Word Counter for Elementor form

javascript

wordpress

counter

elementor