用 input 事件监听文本框输入，通过 value.length 实时统计字符数，动态更新提示文案并按剩余/超限状态切换样式。
在 JavaScript 中用 DOM 操作实现文本框字数统计提示，核心是监听输入事件、读取当前值长度、实时更新提示文字。关键在于选对事件（input 最可靠），并注意中文输入法兼容性。
监听 input 事件获取实时输入
input 事件能捕获所有输入方式（键盘、粘贴、剪切、拖入、IME 输入），比 keyup 或 change 更全面。给 <textarea> 或 <input type="text"> 绑定即可：
- 用
addEventListener('input', handler)注册监听器 - 避免用
oninput行内写法，不利于维护 - 不要用
keypress或keydown，它们无法捕获粘贴和输入法上屏后的字符
计算字数并处理中文/英文差异
纯字符计数（一个汉字、一个英文字母、一个数字都算 1 字）最常用。若需按“中文字符占 2 字节、英文占 1 字节”统计（如旧版短信限制），可额外判断：
- 基础统计：
text.length即可满足大多数场景 - 区分中英文：用正则
/[\u4e00-\u9fa5]/g匹配中文，其余算单字节 - 实际建议：除非后端有特殊要求，统一按字符数统计更直观、少歧义
动态更新提示文案并做视觉反馈
把统计结果插入到提示区域（如 <span class="counter"></span>），还可加样式提示剩余/超限状态：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 设置最大长度（如
maxlength="100"或 JS 自定义MAX_LEN = 100） - 显示 “已输入 24 / 100 字”，超限时改为红色并提示 “超出 5 字”
- 可配合
textContent更新文字，用className切换 CSS 类控制颜色
完整可运行示例
HTML 中放一个文本域和提示容器：
<textarea id="content" maxlength="100"></textarea><div class="hint"><span class="counter">0 / 100</span></div>
JS 部分：
const el = document.getElementById('content');const counter = document.querySelector('.counter');
const MAX = 100;
el.addEventListener('input', () => {
const len = el.value.length;
const remain = MAX - len;
counter.textContent = `${len} / ${MAX}`;
if (remain counter.className = 'counter over';
} else {
counter.className = 'counter';
}
});
CSS 可加一句：.counter.over { color: #d32f2f; }
