How to realtime reflect the word count of textarea. The below script works great for count characters (even non-English languages are OK). But the problem is that it won't work if the text is generated from the script itself. I had changed the event from "keyup" to "change" to "input", but none of them will work. they only work when typing in the textarea.

Anyone gives me some ideas?

var outputCombo = document.getElementById("outputCombo");
var textInfo = document.getElementById("text-info ");

if (document.querySelector('input[name="radio_btn"]')) {
  document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => {
    elem.addEventListener("change", function(event) {
      outputCombo.value = "you pressed "   elem.value;

    });
  });
}



outputCombo.addEventListener("input", function() {
  var maxLength = 280;
  var strLength = outputCombo.value.replace(/[^\x00-\xff]/g, "01 ").length;
  var charRemain = (maxLength - strLength);
  if (charRemain < 0) {
    textInfo.innerHTML = '<span style="color: red; ">surpassed '   charRemain   ' chracters</span>';
    outputCombo.style.backgroundColor = 'red';
  } else {
    textInfo.innerHTML = 'remaining: '   charRemain;
    outputCombo.style.backgroundColor = 'white';
  }
});

<ul class="ul">
  <li class="">
    <input type="radio" name="radio_btn" value="Instagram">
    <label>Instagram</label>
  </li>
  <li class="">
    <input type="radio" name="radio_btn" value="Twitter"><label>Twitter</label>
  </li>
</ul>
<textarea class="form-control" id="outputCombo"></textarea>
<span id="text-info ">word count: </span>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I add your script for count into a function then use it when you change value of textarea like:

var outputCombo = document.getElementById("outputCombo");
var textInfo = document.getElementById("text-info ");

if (document.querySelector('input[name="radio_btn"]')) {
  document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => {
    elem.addEventListener("change", function(event) {
      outputCombo.value = "you pressed "   elem.value;
      countTextArea();
    });
  });
}



outputCombo.addEventListener("input", function() {
  countTextArea();
});

function countTextArea() {
  var maxLength = 280;
  var strLength = outputCombo.value.replace(/[^\x00-\xff]/g, "01 ").length;
  var charRemain = (maxLength - strLength);
  if (charRemain < 0) {
    textInfo.innerHTML = '<span style="color: red; ">surpassed '   charRemain   ' chracters</span>';
    outputCombo.style.backgroundColor = 'red';
  } else {
    textInfo.innerHTML = 'remaining: '   charRemain;
    outputCombo.style.backgroundColor = 'white';
  }

}

<ul class="ul">
  <li class="">
    <input type="radio" name="radio_btn" value="Instagram">
    <label>Instagram</label>
  </li>
  <li class="">
    <input type="radio" name="radio_btn" value="Twitter"><label>Twitter</label>
  </li>
</ul>
<textarea class="form-control" id="outputCombo"></textarea>
<span id="text-info ">word count: </span>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can manually trigger an input event with outputCombo.dispatchEvent(new Event("input"))

Here's the full code:

<ul class="ul">
    <li class="">
        <input type="radio" name="radio_btn" value="Instagram">
        <label>Instagram</label>
    </li>
    <li class="">
        <input type="radio" name="radio_btn" value="Twitter"><label>Twitter</label>
    </li>
</ul>
<textarea class="form-control" id="outputCombo"></textarea>
<span id="text-info ">word count: </span>

<script type="text/javascript ">
    var outputCombo = document.getElementById("outputCombo");
    var textInfo = document.getElementById("text-info ");

    if (document.querySelector('input[name="radio_btn"]')) {
        document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => {
            elem.addEventListener("change", function(event) {
                outputCombo.value = "you pressed "   elem.value;

                // Here is the triggered event
                outputCombo.dispatchEvent(new Event("input"))

            });
        });
    }



    outputCombo.addEventListener("input", function() {
        var maxLength = 280;
        var strLength = outputCombo.value.replace(/[^\x00-\xff]/g, "01 ").length;
        var charRemain = (maxLength - strLength);
        if (charRemain < 0) {
            textInfo.innerHTML = '<span style="color: red; ">surpassed '   charRemain   ' chracters</span>';
            outputCombo.style.backgroundColor = 'red';
        } else {
            textInfo.innerHTML = 'remaining: '   charRemain;
            outputCombo.style.backgroundColor = 'white';
        }
    });
</script>

CodePudding user response：

Fire the event manually once you set the value to textarea

outputCombo.value = "you pressed "   elem.value;
outputCombo.dispatchEvent(new Event('input'));