layui文本域如何限制最大输入字数

textarea 的 maxlength 属性仅辅助限制，需配合 oninput 实时截断并处理粘贴、输入法组合等场景；Layui 中须手动实现字数统计与校验，表格和 layer.prompt 等特殊场景需定制方案。

textarea 加 maxlength 属性只是辅助，必须配合 oninput 截断

单纯写 maxlength="200" 在 Chrome/Firefox 中能拦住部分超长输入，但粘贴、拖入文本、中文输入法「上屏前」都会绕过。Layui 的 layui-textarea 类不干预原生行为，限制逻辑得你来写。

核心是监听 oninput：它在每次按键、粘贴、删除、甚至输入法组合过程中都触发，比 onkeyup 可靠得多（后者捕获不到鼠标粘贴）。

1. 写法示例：<textarea maxlength="200" oninput="limitText(this, 200)" class="layui-textarea"></textarea>
2. limitText 函数里不能直接 val = val.substr(0, max) —— 否则用户打「你好」时，拼音还没上屏就截断，输入框会错乱或清空
3. 必须监听 compositionstart 暂停截断，等 compositionend 再检查最终长度
4. 粘贴事件需用 setTimeout(() => { /* 读取 value */ }, 0)，否则粘贴内容在 paste 回调里还不可见

显示剩余字数要注意定位和选择器范围

很多代码把计数 <div class="word">0/200</div> 放在 <textarea> 同级，但没给父容器加 position: relative，结果数字飘到页面角落。

Layui 的 .layui-input-block 必须显式设样式：

.layui-input-block { position: relative; }.word { position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: #aaa; }

JS 更新时要用 $(obj).next('.word').text(`${curr}/${max}`)，不能写 $('.word') 全局匹配——多个 textarea 会互相覆盖。

1. 动态插入的 textarea（比如弹窗表单），要确保 .word 元素已存在，否则 .next() 返回空
2. 如果用了 lay-verify 自定义校验，字数检查应放在 form.verify 里，但实时显示仍得靠 oninput

表格内单元格编辑不能用 edit:"textarea"

Layui 表格的 edit: "textarea" 是封装过的，不透传 maxlength，也不支持绑定 oninput 或 paste 事件。

想限制字数，必须放弃这个快捷方式，改用 templet 自定义模板：

1. 列配置中写 templet: '<textarea maxlength="100" oninput="limitText(this, 100)"></textarea>'
2. 同时监听 input 和 paste，并处理 compositionstart/end
3. 表格重载时注意事件重复绑定，建议每次渲染后先 off() 再 on()，或用事件委托

layer.prompt 里加字数限制得手动操作 DOM

layer.prompt 不接受 minlength 或 maxlength 参数，底层固定渲染一个 <input type="text">，属性得你手动加。

在 success 回调里操作：

1. 用 layero.find('input').attr('maxlength', '10') 添加 HTML 属性（影响浏览器提示）
2. 更推荐 .prop('maxLength', 10)，DOM 层级控制更稳，兼容 IE/Edge
3. yes 回调里必须二次校验：if (val.length < 2 || val.length > 10) { layer.tips(...); return; }
4. 别写 content: '<input maxlength="10">' —— layer 会把它当纯文本渲染，不生效

最小长度校验完全靠 JS，因为 minlength 在 input 上不会触发原生提示，required 也只管非空，不管长度下限。