Layui input加maxlength但不阻止输入，需绕过layui封装干扰，用原生input事件监听实时更新右侧span提示“还剩X字”或“已超X字”，中文、英文、Emoji均按字符计，提交时仍须后端校验。
layui input 怎么加 maxlength 但又不阻止输入？
layui 的 input 默认不响应 maxlength 属性（尤其在 lay-ver="required" 场景下），直接写 maxlength="10" 可能无效或导致光标跳变。真正要的是“允许输入超限，但实时提示剩余字数”，而不是粗暴截断。
关键在于绕过 layui 对原生表单的封装干扰，用原生事件监听 + 手动更新提示文案：
- 不要依赖
lay-verify做字数校验——它只在提交时触发，无法实时反馈 - 给
input加id（比如id="title-input"），方便 DOM 操作 - 在
form.render()之后，用document.getElementById拿到原生元素，绑定input事件 - 提示文案建议放在
input同级的span或small标签里，用layui-hide控制显隐更稳妥
怎么动态显示「还剩 X 字」提示？
别用 layer.msg 或弹窗，太打扰。最轻量的做法是：在 input 右侧追加一个 span，实时更新文本内容。注意两点：一是中文、英文、Emoji 都按字符计（不是字节），二是避免频繁重绘影响性能。
示例代码片段（放在 form.on('submit(...)') 外部）：
const input = document.getElementById('title-input');
const tip = document.getElementById('title-tip'); // <span id="title-tip"></span>
const maxLen = 20;
<p>input.addEventListener('input', function() {
const len = this.value.length;
if (tip) {
if (len > maxLen) {
tip.innerHTML = '<font color="red">已超 ' + (len - maxLen) + ' 字</font>';
} else {
tip.innerHTML = '还剩 ' + (maxLen - len) + ' 字';
}
}
});⚠️ 容易踩坑：如果 input 是通过 layui.form().val() 动态赋值的，input 事件不会触发，得手动调用一次更新函数。
textarea 的字数限制逻辑一样吗？
基本一致，但要注意：textarea 的换行符在不同系统下可能是 \r\n 或 \n，而用户感知的「字数」通常就是光标移动次数，所以仍用 .value.length 最直观。layui 的 textarea 渲染后结构不变，同样适用上述 input 事件监听。
唯一差异是样式适配：提示文字建议放在 textarea 下方右对齐，避免遮挡滚动条；如果用了 lay-auto 自适应高度，提示区域需设 margin-top: 5px 防重叠。
- 别用
keyup替代input——粘贴、剪切、拖入等操作不会触发keyup - 移动端软键盘回车键可能触发两次
input，但length计算本身无副作用，无需防抖 - 如果页面有多个字段要限制，把上面逻辑抽成函数，传入
el和max即可复用
提交时还要再校验一次吗？
要。前端提示只是体验优化，后端必须做相同长度校验。layui 的 form.verify 可以补一层保险：
form.verify({
title: function(value) {
if (value.length > 20) {
return '标题不能超过 20 个字符';
}
}
});这里 value 是原始字符串，和前端显示的逻辑完全一致。注意：如果用户绕过 JS（禁用脚本），仅靠这个验证兜底；但提示文案和限制数值必须前后端严格同步，否则会引发困惑。
真正麻烦的不是实现，而是当字段同时存在「中英文混排」「全角空格」「emoji 表情」时，用户对「1 个字」的理解和程序计算结果是否一致——这时候得和产品确认：到底按 Unicode 码点数，还是按渲染宽度，或是按数据库字段实际占用字节数来定义「字数」。
