Layui input实时统计剩余字数应监听input事件，用Array.from(value).length准确计数，通过事件委托绑定并配合lay-maxlength属性和char-count-tip提示元素实现。
layui input 实时统计剩余字数的关键是监听 input 事件，不是 change 或 blur
因为 change 只在失焦后触发，blur 同理，而用户边打字边看剩余字数必须响应每一次按键（包括粘贴、删除、中文输入法未上屏等）。layui 的表单元素默认不阻止原生行为，所以直接给 input 或 textarea 绑定 input 事件即可，无需动 layui.form.render()。
注意：Layui 2.8+ 对 textarea 的 maxlength 支持已较完善，但对 input[type="text"] 的中文输入法兼容仍有坑——部分输入法在组合字未确认前会触发多次 input，导致字数跳变。稳妥做法是加防抖或用 compositionstart/compositionend 过滤。
如何正确获取当前输入内容长度（含中文、emoji、空格）
别用 .value.length 直接算——它返回的是 UTF-16 码元个数，一个 emoji（如 ?）占 2 个码元，但业务上通常算作「1 字」；中文字符也是 1 字。真正该用的是 Array.from(value).length，它按 Unicode 字符计数，更符合用户感知。
- ✅ 推荐：
const len = Array.from(elem.value).length - ❌ 避免：
elem.value.length（对 emoji 和部分生僻字不准） - ⚠️ 补充：若后端限制是「字节数」（如 MySQL utf8mb4 字段），需另用
new TextEncoder().encode(value).length，但字数提示场景极少这么用
绑定事件时绕开 Layui 的 re-render 干扰
Layui 在调用 form.render() 后，会重写 input 元素的 id 和 class，甚至可能替换 DOM 节点（尤其带 lay-verify 时）。如果事件是初始化时用 document.getElementById() 获取元素再绑定，后续 re-render 后事件就丢了。
安全做法是：
- 用事件委托：监听父容器（如
form或指定div），过滤input[lay-maxlength]类型 - 或在每次
form.render()后重新绑定（不推荐，易漏） - 更简单：把统计逻辑写在
form.on('submit(...)前，并确保 DOM 加载完再执行绑定
示例绑定代码：
document.querySelector('form').addEventListener('input', function(e) {
const target = e.target;
if (target.hasAttribute('lay-maxlength')) {
const max = parseInt(target.getAttribute('lay-maxlength'), 10);
const current = Array.from(target.value).length;
const remain = Math.max(0, max - current);
const tip = target.nextElementSibling;
if (tip && tip.classList.contains('char-count-tip')) {
tip.textContent = `还剩 ${remain} 字`;
}
}
});
显示提示文案的位置和更新时机要避开渲染冲突
Layui 的 input 通常包裹在 layui-form-item 内，右侧放提示最自然。但别用 layui-inline 或强行 float:right —— 容易被 form.render() 重置样式。推荐在 input 后紧跟一个 <span class="char-count-tip"></span>，并用 CSS 控制位置：
.layui-form-item .char-count-tip {
font-size: 12px;
color: #999;
margin-left: 8px;
}
关键细节：
- 不要在
input上写maxlength属性——它会截断输入，用户看不到实时反馈；只用lay-maxlength作 JS 标识 - 粘贴大段文本时，
input事件可能延迟触发，可加setTimeout(..., 0)确保 DOM 更新完成后再取值 - 移动端 iOS Safari 对
compositionend支持不稳定，建议对input事件加if (e.inputType === 'insertFromPaste')单独处理粘贴逻辑
最易被忽略的是中文输入法未上屏状态：用户敲「nihao」还没按空格，此时 input 事件已频繁触发，但值是拼音。这时候显示「还剩 X 字」会误导。真要严谨，得监听 compositionstart 暂停统计，compositionend 恢复——但多数业务场景可接受这点小误差。
