页面加载时触发JS事件 实现字符剩余计数初始化

先给你修改好的代码，直接就能实现页面加载后立即显示剩余字符数，同时保留原有的keyup触发逻辑：

<input type="text" name="title" value="" title="This is a required field." placeholder="title" maxlength="64" id="max_length_red" required>
<div class="max_length_red"></div>
<script>
(function(){
    // 把处理逻辑封装成独立函数，方便重复调用
    function updateRemainingChars(inputEl) {
        const value = inputEl.value;
        const valueLength = inputEl.value.length;
        const maxChars = parseInt(inputEl.getAttribute("maxlength"));
        const remainingChars = maxChars - valueLength;
        
        if(valueLength > maxChars){
            inputEl.value = value.substr(0, maxChars);
            return;
        }
        inputEl.nextElementSibling.innerHTML = remainingChars + " remainingChars";
    }

    // 保留原有的keyup事件监听
    document.addEventListener("keyup", function(event){
        if(event.target.matches("#max_length_red")){
            updateRemainingChars(event.target);
        }
    });

    // 页面DOM加载完成后立即执行一次，初始化显示剩余字符数
    document.addEventListener("DOMContentLoaded", function() {
        const inputEl = document.getElementById("max_length_red");
        updateRemainingChars(inputEl);
    });
})();
</script>

修改核心点 #

• 将原本写在keyup回调里的逻辑抽成独立函数updateRemainingChars，避免重复写相同代码，也方便在不同时机调用。
• 添加DOMContentLoaded事件监听，确保页面DOM结构加载完成后，立刻触发剩余字符数的计算和显示。

页面加载时触发JS事件的常用方法 #

• DOMContentLoaded事件：最常用的方式，HTML文档完全解析完成后就触发，不需要等待图片、样式表等外部资源加载，性能更优，就是上面代码里用的方式。
• window.onload事件：会在整个页面（包括所有外部资源）加载完成后触发，如果你的逻辑必须依赖外部资源加载完成，可以用这个，但多数场景下DOMContentLoaded足够。
• 把script标签放在body末尾：如果script写在</body>标签前，此时DOM已经加载完毕，直接在脚本里调用函数即可，不用监听事件。比如：

  <body>
    <!-- 页面所有元素 -->
    <script>
        const inputEl = document.getElementById("max_length_red");
        updateRemainingChars(inputEl);
    </script>
  </body>
  

• 给script加defer属性：脚本会在DOM加载完成后按顺序执行，不需要额外写事件监听，适合外部脚本文件：

  <script src="your-script.js" defer></script>
  

内容的提问来源于stack exchange，提问作者Gavriel Adi