如果文本是在textarea中生成的，Javascript字數統計功能不起作用

如何實時反映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>

uj5u.com熱心網友回復：

我將您的計數腳本添加到一個函式中，然后在您更改 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>

uj5u.com熱心網友回復：

您可以手動觸發輸入事件 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>

uj5u.com熱心網友回復：

將值設定為后手動觸發事件 textarea

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

標籤：javascript 功能 事件 文本区 添加事件监听器

上一篇：在React中拖動Div中的影像時，如何防止在新選項卡中打開

下一篇：如何將身體部位影像合并為一個