maxlength仅对text、search、url、tel、email、password类型有效，number等类型无效；中文输入需监听input和compositionend事件配合截断；它不影响CSS宽度，且服务端必须二次校验。
input maxlength 属性为什么有时不生效
因为 maxlength 只对 type="text"、type="search"、type="url"、type="tel"、type="email" 和 type="password" 有效，对 type="number"、type="date"、type="hidden" 等完全无效——浏览器会直接忽略它。
常见错误现象：给 <input type="number" maxlength="3"> 加了属性，但用户仍能输入任意长度数字，控制台也无报错。
- 用
type="number"时，应改用min/max或 JS 拦截输入，而不是依赖maxlength -
type="textarea"支持maxlength，但要注意：它限制的是字符数（含换行符），不是行数 - 中文输入法下，未上屏的拼音串（如“zhong”）不算入长度统计，用户按空格确认后才触发截断
如何让 maxlength 在中文输入场景下更可靠
用户用拼音输入法打字时，maxlength 不会实时响应候选区内容，导致松手前已超限却无感知。这不是 bug，是规范行为——DOM 只在输入确认后更新 value。
若需实时限制（比如防用户输到一半才发现被截），得配合 JS：
- 监听
input事件，检查event.target.value.length，超限时调用event.target.value = event.target.value.slice(0, N) - 注意避免在中文输入过程中强制截断，否则会打断输入法组合逻辑；可加判断：
if (!event.isComposing) - 移动端 WebView（尤其旧版 iOS Safari）对
input事件触发时机不一致，建议同时监听compositionend
maxlength 和 CSS width 完全是两回事
有人以为设了 maxlength="10" 就能控制输入框视觉宽度，结果发现输入框还是那么宽——maxlength 不影响布局，它只管数据提交前的字符数量。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
真正影响显示宽度的是：
- CSS 的
width、ch单位（如width: 10ch表示约等于 10 个 “0” 字符的宽度） - HTML 的
size属性（仅对type="text"和type="search"有效，表示可见字符数，和maxlength无关） -
cols用于<textarea></textarea>，同样只影响初始宽度，不影响长度限制
服务端必须重新校验长度
maxlength 是纯前端约束，删掉属性、禁用 JS、用 curl 提交，都能绕过。所以后端收到数据后，必须用语言原生方式再检查一次长度。
例如 Node.js 中用 str.length，Python 中用 len(str)，但要注意：
- JavaScript 的
.length对 emoji 或某些 Unicode 字符（如 ??）可能返回错误计数，应使用[...str].length或Intl.Segmenter - 数据库字段定义（如 MySQL
VARCHAR(50)）才是最终防线，前端限制只是用户体验优化 - 如果前后端最大长度不一致（比如前端设 20，后端校验 30），用户会困惑为什么明明没超却提交失败
最常被忽略的一点：富文本编辑器、contenteditable 区域、或通过 document.execCommand 插入的内容，根本不受 maxlength 管控——这类场景只能靠 JS + 后端双保险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
