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

Question

如何实时反映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>

标签： javascriptfunctioneventstextareaaddeventlistener

Answer 1

我将您的 count 脚本添加到一个函数中，然后在您更改 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>