聚焦输入框时显示字数提示并实时更新，核心是监听focus事件显示提示元素、input事件动态刷新字数；blur时可选择隐藏提示；推荐用css类控制显隐，兼顾样式统一与功能扩展。
当用户点击或通过 Tab 键聚焦到输入框时，触发字数统计提示显示，核心是监听 focus 事件，并在回调中控制提示元素的可见性（比如设置 display: block 或添加 CSS 类）。
监听 focus 事件并显示提示
给输入框绑定 focus 事件，事件触发时让原本隐藏的字数提示区域显示出来。常见做法是用 classList.add() 切换 CSS 类，或直接操作 style.display：
- 确保提示元素（如
<div class="char-count"></div>）初始为display: none - 在
focus回调中设为display: block或添加显示类（推荐用类，便于统一控制样式） - 可同时触发一次字数更新（避免聚焦后提示仍为空）
配合 input 事件实时更新字数
仅靠 focus 显示提示还不够，用户输入时需动态更新数字。建议同时监听 input 事件：
-
input比keyup更可靠，能捕获粘贴、剪切、自动填充等所有内容变化 - 在回调中读取
input.value.length，更新提示文字，例如：countEl.textContent = input.value.length + '/100' - 可加逻辑限制最大长度（如
maxlength属性或 JS 截断），并在提示中体现剩余字数
可选：blur 时隐藏提示（按需）
如果希望提示只在编辑时出现，可在失去焦点时隐藏：
- 监听
blur事件，在回调中移除显示类或设display: none - 注意：若提示还承担“错误提示”等功能，建议保留显示，或根据业务逻辑判断是否隐藏
一个简洁可用的示例
HTML 结构：
JS 部分：
const input = document.getElementById('title');const countEl = document.querySelector('.char-count');
input.addEventListener('focus', () => {
countEl.style.display = 'block';
updateCount();
});
input.addEventListener('input', updateCount);
function updateCount() {
const max = input.maxLength;
const current = input.value.length;
countEl.textContent = `${current}/${max}`;
}
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
