HTML输入框maxlength属性怎么限制用户输入的最大字符数-html教程-PHP中文网

maxlength仅对text、search、url、tel、email、password和textarea生效；按unicode码点计数，非utf-16单元；粘贴等操作可绕过，需js监听input事件并用array.from截断；后端校验须与前端一致。

html输入框maxlength属性怎么限制用户输入的最大字符数

maxlength 属性能限制用户在 <input> 和 <textarea></textarea> 中输入的字符数，但它不是“万能开关”——用错类型、忽略粘贴绕过、混淆计数逻辑，都会让限制失效。

哪些 input type 支持 `maxlength`？

只对语义上表示「字符串输入」的类型生效：

type="text"、"search"、"url"、"tel"、"email"、"password" ✅
type="number"、"date"、"range"、"checkbox" ❌（浏览器直接忽略，不报错也不拦截）
<textarea></textarea> ✅（唯一支持多行文本的原生方案）

常见错误：<input type="number" maxlength="3"> 看似写了，实际完全没用。应改用 max="999" + JavaScript 拦截非数字输入，或换回 type="text" 并监听 input 事件。

`maxlength` 的字符数到底是怎么算的？

它按 Unicode 码点（code point）计数，不是字节数，也不是“人眼看到的字数”，但和大多数用户直觉基本一致：

英文、数字、常见标点、中文汉字：1 字符 = 1 码点 → maxlength="10" 可输 10 个汉字或 10 个字母
emoji（如 ?‍?、?）或生僻字：可能占 2–4 码点 → 同样 maxlength="10" 下，可能只能输 2~3 个 emoji 就满额
组合字符（如 é、ñ）：通常 1 码点（预组合形式），但若用基础字母+变音符号拼成（如 e\u0301），则算 2 码点

这意味着：前端用 value.length 截断 ≠ maxlength 行为。JavaScript 的 .length 统计的是 UTF-16 编码单元（code unit），对代理对（surrogate pair）会返回 2；而 maxlength 在现代浏览器中已统一按码点计数（更准确）。若需严格按“用户可见字符”控制，必须用 Array.from(value).length。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

为什么用户还能粘贴超长内容？

因为 maxlength 只拦截键盘输入和部分剪贴板操作（如 Chrome 对 Ctrl+V 的基础截断），但对以下行为无约束力：

右键粘贴（尤其是含 emoji 或长文本时）
拖放文本到输入框
通过 DevTools 直接赋值：input.value = '超长字符串'

所以必须加一层 JS 防御：

const input = document.querySelector('input[maxlength]');
input.addEventListener('input', () => {
  const max = parseInt(input.getAttribute('maxlength'));
  const chars = Array.from(input.value); // 真实字符数
  if (chars.length > max) {
    input.value = chars.slice(0, max).join('');
  }
});

注意：要监听 input 而非 change，且需配合 compositionstart/compositionend 处理中文输入法上屏逻辑，否则会打断拼音输入。