如何限制HTML表单中输入字符的长度-html教程-PHP中文网

maxlength仅支持和，对number、date等类型无效；它按Unicode码点计数，非安全机制，后端必须二次校验。

如何限制html表单中输入字符的长度

maxlength 能用，但只对部分类型生效，不是所有 input 都能靠它拦住超长输入。

哪些元素和类型真正支持 `maxlength`

只有以下组合才被 HTML 规范明确支持：

、、、、、
（现代浏览器基本支持，但旧版 Safari iOS 9–10 和部分 Android WebView 会忽略）

常见错误写法： —— 浏览器直接忽略，用户仍可输入任意位数；或

 加了也无效。
maxlength 计的是什么长度？
它按 Unicode 码点（UTF-16 code unit）计数，不是字节数，也不是“人眼看到的字数”：

一个汉字（如“好”）、一个英文字母、一个换行符 \n，都算 1
大多数 emoji（如 ??）占 2 个码元 → maxlength="10" 时，5 个 ?? 就到上限
组合型 emoji（如 ?‍?）可能跨多个码元，实际长度易被低估

这意味着：如果后端要求“UTF-8 字节数 ≤ 32”，仅设 maxlength="10" 完全无法对应，必须服务端重新计算字节长度。
为什么用户还能粘贴超长内容？
因为 maxlength 对粘贴（paste）、拖拽、API 直接赋值等场景拦截不彻底：

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										


 在 Chrome 中粘贴超长文本后，值会短暂越界，再触发 input 事件
移动端尤其明显：Android 某些 WebView 不截断粘贴，iOS 键盘可能禁用按键但不防粘贴
框架中（如 Vue/React）若只设 maxlength 属性，不处理 @input 或 onInput，双向绑定会被覆盖

补救方案是监听 input 和 paste 事件：
const el = document.querySelector('textarea');
el.addEventListener('input', () => {
  if (el.value.length > 200) {
    el.value = el.value.slice(0, 200);
  }
});
el.addEventListener('paste', (e) => {
  e.preventDefault();
  const text = e.clipboardData.getData('text');
  const truncated = text.slice(0, 200 - el.value.length);
  document.execCommand('insertText', false, truncated);
});

服务端校验不是可选项，而是必做项
前端所有限制（maxlength、JS 截断、pattern）都能被绕过：

禁用 JS 后手动修改 DOM
用 curl 或 Postman 直接发请求
数据库字段（如 MySQL VARCHAR(20)）若没对齐长度，会报 Data too long


PHP 应用 mb_strlen($str, 'UTF-8')，Node.js 注意解析后的空格是否被转义（如 +），入库前必须重验。别让 maxlength 给你一种“已经安全了”的错觉。