应使用input事件实时监听字数变化，绑定在原生input或textarea元素上，配合compositionstart/end处理输入法组合状态，并用flex布局显示剩余字数。
input输入时怎么监听字数变化
直接用 input 事件，别用 change 或 blur —— 后两者只在失焦或确认后触发，无法实时更新计数。layui 的表单元素本质还是原生 <input> 或 <textarea></textarea>，所以监听逻辑和原生一致。
常见错误是给 layui-form-item 容器绑定事件，结果没反应：事件必须绑在实际的 <input> 或 <textarea></textarea> 元素上。
- 用
document.querySelector或layui.$获取目标元素（推荐后者，兼容性好） - 确保 Layui 已完成渲染，监听写在
form.render()之后或layui.use(['form'], callback)内部 - 中文、英文、Emoji 都算一个字符，用
value.length即可，不用正则或String.prototype.codePointCount（Layui 场景下没必要过度处理）
怎么把剩余字数显示在 input 右侧
不能硬塞 DOM 或靠绝对定位覆盖——Layui 表单结构有固定 class 套路，强行加元素容易被 form.render() 冲掉或样式错位。正确做法是复用 Layui 自带的提示容器：layui-form-text 或紧邻的 layui-form-mid 区域。
更稳妥的是在 <div class="layui-form-item"> 内、<code><input> 后面手动加一个 <span class="layui-word-count"></span>，然后用 CSS 控制对齐：
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" maxlength="50" autocomplete="off" class="layui-input"><span class="layui-word-count" style="float:right; font-size:12px; color:#999;">剩余 50 字</span>
</div>
</div>
-
maxlength属性必须设，它是计算上限的依据，别只靠 JS 校验 - 避免用
right: 0绝对定位——表单项宽度不固定时会跑偏 - 如果用了
layui-input-inline，需改用display: inline-block+vertical-align: middle对齐
为什么输入中文时字数跳变或不准
不是编码问题，是输入法「组合状态」导致的：用户按拼音还没选字时，input 事件会触发，但 value 是未确认的拼音串（比如「nihao」），长度远超预期。真实字数要等输入法确认后才稳定。
Layui 默认不处理这个，得自己过滤：
- 监听
compositionstart标记进入输入法编辑状态 - 监听
compositionend标记结束，此时再更新计数 - 期间忽略所有
input事件（或只做 UI 灰显，不改数字）
简单实现就是加个开关变量：
let isComposing = false;
elem.on('compositionstart', () => isComposing = true);
elem.on('compositionend', () => {
isComposing = false;
updateWordCount();
});
elem.on('input', () => {
if (!isComposing) updateWordCount();
});
移动端软键盘弹起时提示文字被顶飞怎么办
这是 iOS Safari 和部分安卓 WebView 的经典表现：软键盘遮挡 + position: fixed 或浮动元素重排异常。Layui 的 layui-word-count 如果用 float:right，在键盘弹出瞬间可能脱离父容器流。
根本解法不是调 CSS，而是换布局模式：
- 把计数
<span></span>放进<input>的父级<div class="layui-input-block">，并用 <code>display: flex; justify-content: space-between - 去掉所有
float和position，依赖 Flex 布局自适应 - 测试时务必真机连 Chrome DevTools 远程调试，模拟器常表现正常但真机出问题
复杂点在于 Layui 的响应式断点会让 layui-input-block 在小屏下变块级，flex 要加 flex-wrap: wrap 防止换行错位——这点容易被忽略，一到手机上就左右挤在一起。
