maxlength仅对text、search、tel、url、email、password和textarea有效，对number、date、file等类型无效；它仅阻止键盘输入超长字符，不拦截粘贴、拖拽或JS赋值，且服务端必须二次校验。
maxlength 是最直接的方案，但它只对 text、search、tel、url、email、password 和 textarea 有效；对 number、date、file 等类型完全无效——写了也白写。
哪些 input 类型能用 maxlength？
能用的类型行为一致：浏览器会阻止键入超长内容，但不拦截粘贴。常见错误是给 input[type="number"] 加 maxlength，结果用户照输不误，因为数字输入框根本不读这个属性。
-
text、search、tel、url、email、password：安全可用，移动端键盘可能提前禁用部分按键 -
textarea：支持，但旧版 Safari（iOS 9–10）和某些 Android WebView 会忽略，必须 JS 补位 -
number、date、file、checkbox、radio：无视maxlength，需用 JS 监听input或change事件手动截断
为什么粘贴后还是超长？
因为 maxlength 只拦截键盘输入，不处理粘贴、拖拽或 JS 赋值。用户右键粘贴一段 200 字的内容到 maxlength="10" 的框里，浏览器通常会自动截取前 10 个字符——但 Android 部分版本、某些 WebView 会放行全部。
- 必须监听
paste事件并调用event.preventDefault() - 再用
setTimeout延迟读取input.value，否则粘贴内容还没写入 DOM - 直接赋值
input.value = ...会触发新input事件，若没防重入，可能死循环
中文、Emoji 算几个长度？
maxlength 按 JavaScript 的 .length 计算，即 UTF-16 码元数。绝大多数汉字、英文字母、基础 Emoji（如 ?）都占 1 个码元，所以“10 个字符”直观可靠。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 但复合 Emoji（如
??）或生僻汉字（U+10000 以上）占 2 个码元，maxlength="1"会把它切成半个，显示为方块 - 换行符
\n算 1 个字符，Windows 的\r\n在多数浏览器里算 2 个 - 需要按字节数限制（比如匹配 MySQL
VARCHAR(255)）？必须用new TextEncoder().encode(str).length手动算，并在input事件里实时截断
服务端校验为什么不能省？
前端所有限制都可被绕过：curl 发请求、禁用 JS、删掉 maxlength 属性、用 React/Vue 的响应式更新跳过截断逻辑——只要后端不校验，就等于没设。
- PHP 用
mb_strlen($str, 'UTF-8')判断字符数，strlen()会错判中文 - Node.js 中
req.body.field.length是 UTF-16 长度，和前端.length一致，但要注意 URL 编码空格变成+，需先decodeURIComponent - 数据库字段长度（如
VARCHAR(50)）必须和前后端限制对齐，否则插入时直接报Data too long
真正容易被忽略的是：不同浏览器对代理对（surrogate pair）的处理差异，以及移动端软键盘在 maxlength 触发后的实际行为——真机测试比看文档管用得多。
