HTML中input的maxlength限制怎么用-html教程-PHP中文网

maxlength仅对text、search、url、tel、email、password及textarea有效，对number、date等类型无效；按utf-16码元计数，不拦截粘贴等操作，后端必须校验。

html中input的maxlength限制怎么用

maxlength 能起作用，但只在对的标签、对的类型、对的时机下才真正“拦得住”输入——它不是万能开关，也不是安全锁。

哪些 `input` 类型支持 `maxlength`

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

type="text"、type="search"、type="url"、type="tel"、type="email"、type="password" —— ✅ 原生支持
type="number"、type="date"、type="range"、type="checkbox" —— ❌ 浏览器直接忽略，写了也白写
<textarea></textarea> —— ✅ 支持，且是多行场景唯一推荐方式（input 无法换行）

常见踩坑：<input type="number" maxlength="3"> 看似合理，实则完全无效；用户输 12345 不会截断，控制台也无报错，容易误判为“属性没生效”。

`maxlength` 怎么计数？中文、emoji、换行都算几个？

按 UTF-16 码元（code unit）计数，不是字节，也不是人眼看到的“字数”：

一个汉字（如“好”）、英文（如“a”）、数字、标点、换行符 \n → 各算 1 个
大多数 emoji（如 ??）占 2 个码元 → maxlength="10" 下最多输 5 个就满
带声调的字符（如 á）通常占 1 个码元，但组合形式（如 a + ◌́）可能算 2 个

这意味着：如果后端要求“UTF-8 字节数 ≤ 32”（比如对接短信网关或 MySQL VARCHAR(32)），maxlength="10" 完全无法对应——中文在 UTF-8 中占 3 字节，10 个汉字就是 30 字节，但加一个 ?? 就可能超限。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

为什么设置了 `maxlength` 还能粘贴超长内容？

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

右键粘贴
拖放文本
用 DevTools 直接修改 value 属性
程序化赋值：el.value = longString

所以必须补一层 JavaScript 实时截断：

const el = document.getElementById('myInput');
el.addEventListener('input', () => {
  if (el.value.length > 50) {
    el.value = el.value.slice(0, 50);
  }
});

注意：用 input 事件而非 keydown，前者覆盖粘贴、拖拽、语音输入、IME 上屏等所有修改路径；后者漏掉右键粘贴和输入法确认。