不能只用 maxlength 属性显示字数，因为它仅限制输入且无ui反馈；需手动添加dom节点并绑定input事件实现实时统计与提示，同时注意字数计算、截断逻辑及样式布局。
为什么不能只用 maxlength 属性显示字数？
因为 maxlength 只限制输入，不提供任何 UI 反馈——用户看不到“还剩多少字”，也不知道自己刚粘贴的 500 字是否被悄悄截断。Layui 自身不自动渲染字数提示，必须手动加 DOM 节点并绑定实时更新逻辑。
监听哪个事件才能覆盖所有输入方式？
必须用 input 事件，不是 keyup、change 或 blur。它能捕获键盘输入、右键粘贴、拖拽文本、中文输入法上屏、甚至自动填充（autofill）等全部场景。实操时注意：
- 事件必须绑定在原生
textarea元素上，别绑到layui-form-item容器 - 如果用了
layui.form.render()，确保绑定写在它之后，否则 DOM 重绘后事件丢失 - 推荐用
layui.$(selector)获取元素，比原生document.querySelector更兼容旧版 IE
怎么把字数提示准确放在右下角？
不能靠绝对定位覆盖，容易错位或被响应式撑开。正确做法是紧贴 textarea 所在的 layui-input-block 或 layui-form-text 内部末尾追加一个 <div>：
<pre class="brush:php;toolbar:false;"><div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea name="desc" class="layui-textarea"></textarea><div class="layui-form-text-count">剩余 200 字</div>
</div>
</div></pre>
<p>CSS 建议这样写，避免换行和跳动：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
<p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p>
</div>
<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">.layui-form-text-count {
font-size: 12px;
color: #999;
text-align: right;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}</pre>
<h3>字数计算和截断要注意什么？</h3>
<p>前端统计“字数”默认按 <code>textarea.value.length 算：中文、英文、空格、换行符（\n）各算 1 字。这个值和用户感知一致，也方便与后端校验对齐。但关键细节是：
- 别用
innerText或textContent，它们对textarea返回空或不可靠值 - 截断必须在
input回调里做：if (val.length > maxLen) { el.value = val.slice(0, maxLen); } - 不要动态设置
el.setAttribute('maxlength', maxLen)，旧版 Safari 不支持运行时生效 - 如果后端要求按 UTF-8 字节数校验（如中文占 3 字节），得用
new TextEncoder().encode(val).length，但显示余量仍建议用字符数，避免用户困惑
中文输入法下标延迟是浏览器标准行为，不用监听 compositionstart，只要确保逻辑在 input 里，上屏后立刻更新即可。真正容易被忽略的是：字数统计必须独立于 form.verify，否则提交前才校验，用户根本不知道哪错了。
