实时字数统计需监听input事件，获取value.length，超出MAX_LENGTH时用setSelectionRange保持光标位置，并依WARNING_THRESHOLD动态变色提示，兼容input与textarea且容忍IME中间态。
输入框实时显示剩余字数
用户打字时，剩余字数必须立刻更新，不能靠失焦（blur）或提交才计算。核心是监听 input 事件，不是 keyup——后者会漏掉粘贴、剪切、拖入等操作。
-
input事件捕获所有文本变更，包括鼠标右键粘贴、拖放文本、自动填充、甚至 IME 输入（如中文拼音上屏） - 用
textarea.value.length或input.value.length获取当前长度，别用innerText或textContent（对input无效） - 限制值建议设为常量，比如
const MAX_LENGTH = 100，避免硬编码和后续维护困难
超出限制时阻止输入但保留光标位置
单纯截断字符串（如 value = value.slice(0, MAX_LENGTH)）会导致光标跳到末尾，破坏用户体验。正确做法是：只在超出时截断，且用 setSelectionRange 保持原有光标位置。
- 先记录原光标位置：
const cursor = el.selectionStart - 截断后，若原光标 > 新长度，则设为新长度；否则保持原值：
el.setSelectionRange(Math.min(cursor, MAX_LENGTH), Math.min(cursor, MAX_LENGTH)) - 不要用
el.value = el.value.slice(0, MAX_LENGTH)后直接赋值——这会重置光标
显示样式随状态动态变化
剩余字数提示要直观：正常时灰色，临近阈值（如 ≤10）变橙色，超限变红色。不能只改文字颜色，还要考虑屏幕阅读器可访问性。
- 给计数元素加
aria-live="polite"，让读屏软件感知变化 - 用 CSS 类控制颜色，比如
.counter--warning和.counter--error，避免内联 style - 临界值建议可配，比如
WARNING_THRESHOLD = 10，而不是写死 “10” 字符串
兼容多类型表单控件（input 与 textarea）
同一个逻辑要同时支持单行 input[type="text"] 和多行 textarea，它们的 DOM 属性和行为略有差异。
立即学习“前端免费学习笔记（深入）”；
-
input不支持selectionStart/End在某些旧版 Safari 中失效，需降级处理（如不修复光标，仅截断） -
textarea的rows和换行符\n不影响字数统计——按字符数算，不是按“行”或“显示宽度” - 统一用
el.addEventListener('input', handler)，不要分别写两套事件绑定
input 事件会频繁触发，但 value 还没上屏；只有确认上屏（回车/空格）后才算真正输入。这个阶段的长度波动无需干预，但你的计数逻辑必须能容忍中间态——别误判为超限并强行截断。 
