maxlength属性在现代浏览器中可靠，但仅限输入拦截；需JS实时提示、处理粘贴及光标定位，并必须服务端二次校验。

直接用 maxlength 属性，现代浏览器全支持；但必须搭配 JS 做实时提示和粘贴兜底，服务端还得再校验一遍。

textarea 的 maxlength 属性到底靠不靠谱

靠谱，但有边界。HTML5 明确规定 maxlength 可用于 <textarea></textarea>，按 Unicode 码点计数（也就是 JavaScript 中 value.length 的结果），对中文、英文、emoji 都基本准确。

• 它在浏览器输入层拦截，用户根本输不进超长内容，没有“先闪一下再删”的闪烁问题
• 移动端软键盘会自动禁用输入键，体验一致
• 常见失效原因只有两个：max-length 拼错，或加在了 <div> 这类非表单元素上 <li>不处理粘贴：用户 Ctrl+V 一段超长文本，部分浏览器会自动截断，部分则放行——不能依赖</li> <h3>为什么只靠 <code>maxlength 还不够

  因为用户需要反馈，而 maxlength 是静默的。它拦得住输入，但不告诉你“还剩几个字”，也不拦得住粘贴、拖入、语音输入等绕过行为。

  • 监听 input 事件是唯一可靠方式：覆盖键盘、粘贴、剪切、拖放、语音输入全部路径
  • 别用 keydown 或 keyup：右键粘贴、拖文本、iOS 语音输入都捕获不到
  • 中文输入法下要留意 compositionstart/compositionend：未上屏的候选词不算数，提前截断会导致输入法异常
  • 简单兜底逻辑：监听 input，超限时 el.value = el.value.slice(0, MAX)，再用 setSelectionRange 锁定光标位置，避免跳到末尾

  JS 截断时怎么保住光标位置

  直接赋值 el.value = ... 会导致光标跑到最后，用户在中间插入内容后被截断，体验极差。

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载
  • 必须在截断前记录 el.selectionStart 和 el.selectionEnd
  • 截断后立即调用 el.setSelectionRange(pos, pos)，把光标“钉”回原位
  • iOS Safari 对 setSelectionRange 支持不稳定，可降级为仅提示不拦截（比如只更新字数文案，不改 value）
  • 注意：如果用户选中了一段文字再输入，selectionStart === selectionEnd 不成立，需保留选区范围

  服务端校验为什么不能省

  前端限制纯属体验优化。用户禁用 JS、手动删掉 maxlength 属性、用 curl 直接 POST，都能绕过所有前端逻辑。

  • 后端收到数据后，必须重新用相同规则计算长度（比如同样是 str.length，不是字节长度）
  • 特别注意：数据库字段长度限制、索引长度限制、日志截断策略，可能和前端显示的“字数”不一致
  • 混淆“字符数”和“字节数”是线上事故高频原因，比如 MySQL 的 utf8mb4 下 emoji 占 4 字节，但仍是 1 个字符

  真正麻烦的从来不是怎么写那几行 JS，而是中文输入法异步上屏、iOS 光标重置、服务端字符计数口径统一这三件事——漏掉任何一个，上线后都会收到用户“字数不对”的反馈。