需同时监听input和blur事件实时控制背景色，input用于输入过程变红，blur兜底恢复原色；须用classList.toggle精准作用于当前元素，截断value后同步更新样式，避免闪烁或残留红色。
textarea 超限后 background 变红，为什么只监听 input 不够
只绑 input 事件能捕获输入、粘贴、上屏，但无法覆盖「用户已超限、又删掉几个字回到临界值」这种来回波动场景——变红容易，恢复原色却常被忽略。真正要稳，得同时响应 input 和 blur（失焦时兜底校验），且每次都要重算当前长度再决定样式。
- 别用
keyup：漏掉鼠标粘贴、拖入、中文输入法未上屏的中间态 - 别在
form.verify里做样式切换：那是提交时才跑，用户根本看不到实时反馈 - 如果用了
compositionstart/compositionend，记得在compositionend后再检查长度——否则拼音未确认时就误判超限
如何用 JS 动态控制 textarea 的 background 颜色
直接操作 el.style.background 最简单，但要注意：Layui 的 .layui-textarea 默认有 border 和 transition，突然变红可能闪烁。稳妥做法是加一个临时 class，用 CSS 控制背景和边框。
- HTML 中给 textarea 加唯一 class，比如
class="layui-textarea count-input" - CSS 定义：
.count-input.over-limit { background-color: #fff8f8; border-color: #ff7675; } - JS 里统一用
el.classList.toggle('over-limit', currentLen > maxLen)切换，比反复赋值更可靠 - 别写
el.style.backgroundColor = 'pink'—— 容易被 layui 内部样式或后续 render 覆盖
多个 textarea 共存时，怎么避免样式互相污染
常见错误是用 $('.count-input').addClass('over-limit') 全局操作，结果所有文本域一起变红。必须基于事件源元素精准作用。
- 绑定事件时用
layui.$(elem).on('input', function() { ... })，其中elem是当前触发的 textarea DOM 节点 - 计算长度和切 class 都只作用于这个
elem，不查其他 - 如果 textarea 是动态插入（如弹窗表单），确保事件绑定在插入 DOM 之后、
form.render()之前，否则 layui 可能重写节点导致事件丢失 - 表格内用
templet自定义的 textarea，不能依赖form.on('textarea')，得在 templet 渲染回调里手动绑定
超限变红后，用户继续输入怎么办
光变红不够，得阻止实际超限内容留存。单纯靠 maxlength 属性在粘贴、中文输入法等场景下会失效，必须截断 + 同步 value。
- 在
input回调里判断：if (el.value.length > maxLen) { el.value = el.value.slice(0, maxLen); } - 截断后立即再次调用
el.classList.toggle，否则界面显示和真实 value 不一致 - 不要用
el.setAttribute('maxlength', maxLen)动态设置——旧版 Safari 不支持运行时生效 - 如果后端要求按 UTF-8 字节数限制（如短信接口），改用
new TextEncoder().encode(el.value).length计算，但前端变红提示仍建议按字符数，避免用户困惑
blur 事件里也执行一次长度判断和 class 切换。 
