Javascript 如果在文本区域中生成文本，则字数统计功能不起作用

Question

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

有人给我一些想法吗？

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>

Answer 1

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

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>

Answer 2

将值设置为 textarea

后手动触发事件

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

Answer 3

您可以使用 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>

Javascript 如果在文本区域中生成文本，则字数统计功能不起作用

Javascript word count function not working if the text are generated in the textarea

javascript

function

events

textarea

addeventlistener