输入框含初始值时Vanilla JS字符倒计时功能失效问题求助

问题核心是你的代码仅在用户触发keyup事件时才执行字符计算，但页面加载完成后没有主动调用计算函数，导致输入框的初始值字符数未被统计。加上以下调整即可解决：

• 页面加载时主动触发计算：在事件监听代码后直接调用countCharacters()，让页面一加载就根据初始值计算剩余字符。
• 替换事件为input类型：input事件能覆盖更多输入场景（比如鼠标粘贴、输入法选词、拖拽输入等），比keyup更可靠。
• 修复逻辑判断错误：原代码中POST_TITLE.value.length == ''的判断逻辑错误（长度是数字，和空字符串永远不相等），改为判断输入长度为0的情况，并将该判断放在最前面，避免被后续条件覆盖。

修改后的JavaScript代码 #

const POST_TITLE = document.getElementById("post_title");
const MAX_LENGTH = 60;
const CHARS = document.getElementById("chars");

function countCharacters() {
    let enteredChars = POST_TITLE.value.length;
    let charsLeft = MAX_LENGTH - enteredChars;

    // 优先判断输入为空的情况
    if (enteredChars === 0) {
        CHARS.style.color = "black";
        CHARS.textContent = charsLeft + " characters remaining. Please add a meta title.";
        return;
    }

    if(charsLeft > 35) {
        CHARS.textContent = charsLeft + " characters remaining. Please add more characters for better SEO.";
        CHARS.style.color = "red";
    } else if(charsLeft > 10) {
        CHARS.textContent = charsLeft + " characters remaining. Almost there! Just add a few more characters to have a great SEO title.";
        CHARS.style.color = "orange";
    } else {
        CHARS.textContent = charsLeft + " characters remaining. Awesome! Between 50-60 characters is a great SEO title.";
        CHARS.style.color = "green";
    }
}

// 用input事件覆盖更多输入场景
POST_TITLE.addEventListener("input", countCharacters);
// 页面加载时主动执行一次计算
countCharacters();

HTML代码（无需修改） #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <form action="#" class="mt-4">
    <div class="mb-3">
      <label for="post_title" class="form-label">Post title</label>
      <input type="text" class="form-control" id="post_title" minlength="5" maxlength="60" value="some value">
      <span id="chars">60 characters remaining. Please add a meta title.</span>
    </div>
  </form>
</div>

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