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

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

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

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

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

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

<input type="text">、<input type="search">、<input type="tel">、<input type="url">、<input type="email">、<input type="password">
<textarea></textarea>（现代浏览器基本支持，但旧版 Safari iOS 9–10 和部分 Android WebView 会忽略）

常见错误写法：<input type="number" maxlength="3"> —— 浏览器直接忽略，用户仍可输入任意位数；<input type="date"> 或 <div contenteditable> 加了也无效。<h3> <code>maxlength 计的是什么长度？

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

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

这意味着：如果后端要求“UTF-8 字节数 ≤ 32”，仅设 maxlength="10" 完全无法对应，必须服务端重新计算字节长度。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

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

因为 maxlength 对粘贴（paste）、拖拽、API 直接赋值等场景拦截不彻底：

<textarea></textarea> 在 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);
});