HTML5 中用 maxlength 属性可原生限制输入字数，浏览器自动拦截超限输入；需配合 JavaScript 监听 input 事件实时统计并显示字数，支持粘贴等所有修改方式，还可增强提示样式与截断逻辑。
HTML5 中用 maxlength 属性限制最大输入字数，再配合 JavaScript 监听 input 事件，就能实现实时统计与展示。关键在于“限制”和“显示”是两个独立动作：前者由浏览器自动完成，后者必须手动计算更新。
直接用 maxlength 限制输入
这是最基础也最可靠的限制方式，无需 JS 即可生效：
-
maxlength是原生 HTML5 属性，写在标签里即可，例如： - 用户输入达到上限后，后续按键将被浏览器静默拦截，无法继续输入
- 该属性对中文、英文、数字、符号、换行符都按单字符计数（UTF-16 编码下，大部分常用汉字算 1 个字符）
- 注意：
rows和cols只控制显示尺寸，不影响字数限制
用 JavaScript 实现实时字数统计与显示
仅靠 maxlength 不会自动显示数字，需监听内容变化并更新 DOM：
- 推荐监听
input事件（比keyup更全面，覆盖粘贴、剪切、拖入等所有修改方式） - 通过
textarea.value.length获取当前字符数，用textarea.maxLength获取上限值 - 计算剩余字数：
remaining = maxLength - currentValue.length，再写入指定元素（如） - 示例片段：已输入 0/150 字
const ta = document.getElementById('myArea');
const usedEl = document.getElementById('used');
ta.addEventListener('input', () => {
usedEl.textContent = ta.value.length;
});
增强体验的实用细节
让提示更友好、逻辑更健壮：
- 若需排除换行符计数（比如只统计“有效文字”），可用正则过滤：
ta.value.replace(/\r\n|\r|\n/g, '').length - 超出限制时主动截断（虽然
maxlength已拦截，但粘贴超长文本可能短暂突破）：if (ta.value.length > ta.maxLength) { ta.value = ta.value.slice(0, ta.maxLength); } - 样式建议：把字数提示放在右下角，用小号灰色字体，避免遮挡内容；可加颜色反馈，如剩余 ≤10 时变橙色，≤0 时变红色
- 移动端注意：iOS Safari 对
input事件响应及时，但部分旧安卓 WebView 需补充propertychange兼容（现代项目通常可忽略）
不复杂但容易忽略
