如果文本是在 textarea 中生成的，则 Javascript 字数统计功能不起作用答案

【问题标题】：Javascript word count function not working if the text are generated in the textarea如果文本是在 textarea 中生成的，则 Javascript 字数统计功能不起作用
【发布时间】：2021-12-17 14:18:22
【问题描述】：

如何实时反映textarea的字数。下面的脚本非常适合计数字符（即使是非英语语言也可以）。但问题是如果文本是从脚本本身生成的，它将不起作用。我已将事件从“keyup”更改为“change”到“input”，但它们都不起作用。它们仅在输入文本区域时起作用。

有人给我一些想法吗？

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>

【问题讨论】：

标签： javascript function events textarea addeventlistener

【解决方案1】：

我将您的计数脚本添加到一个函数中，然后在您更改 textarea 的值时使用它，例如：

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>

【讨论】：

没问题 :)，记住重用代码的最佳方法是创建函数而不是使用手动触发

【解决方案2】：

您可以使用outputCombo.dispatchEvent(new Event("input"))手动触发输入事件

这是完整的代码：

<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>

【讨论】：

【解决方案3】：

将值设置为 textarea 后手动触发事件

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

【讨论】：