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

Posted 2023-05-07

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

【英文标题】：Javascript word count function not working if the text are generated in the textarea

【发布时间】：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>

【参考方案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'));