textarea脚本生成内容时字数统计失效，如何实现实时统计？

问题根因 #

原生DOM的input、change等交互事件仅在用户手动操作元素时触发，通过JavaScript直接修改textarea的value属性属于程序赋值操作，默认不会触发这些事件，因此统计逻辑不会执行。

解决思路（两种均可，推荐第一种） #

1. 抽离公共统计函数，两处场景分别调用（可维护性最高）

把字符统计的逻辑单独封装成函数，既给input事件做回调，也在单选按钮赋值完textarea后主动调用，不需要依赖事件触发。

2. 程序赋值后手动触发input事件

给textarea赋值后，手动派发一个input事件，之前绑定的监听逻辑就会自动执行。

修复后的完整代码 #

var outputCombo = document.getElementById("outputCombo");
// 注意原代码id后面多了个空格，建议先把html里的id改成不带空格的text-info，避免出错
var textInfo = document.getElementById("text-info");

// 抽离统计逻辑为公共函数
function updateCharCount() {
  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; ">超出' + Math.abs(charRemain) + '个字符</span>';
    outputCombo.style.backgroundColor = 'red';
  } else {
    textInfo.innerHTML = '剩余可输入：' + charRemain + '个字符';
    outputCombo.style.backgroundColor = 'white';
  }
}

if (document.querySelector('input[name="radio_btn"]')) {
  document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => {
    elem.addEventListener("change", function(event) {
      outputCombo.value = "你选择了" + elem.value;
      // 赋值后主动调用统计函数
      updateCharCount();
    });
  });
}

// input事件绑定公共统计函数
outputCombo.addEventListener("input", updateCharCount);

// 页面初始化时也调用一次，避免刷新页面有默认值时统计不生效
updateCharCount();

对应修改HTML里的id，去掉多余空格：

<span id="text-info">字数统计：</span>

第二种方法（手动触发事件的示例） #

如果你不想抽离函数，也可以在赋值后加这段代码手动触发事件：

// 单选按钮的change回调里赋值后加这两行
const inputEvent = new Event('input');
outputCombo.dispatchEvent(inputEvent);

内容的提问来源于stack exchange，提问作者Jimmy Xee