layui-textarea左侧加图标需Layui 2.8+，旧版须手动绝对定位；必须满足：外层为layui-form-item、textarea带layui-textarea类且有name属性；图标用标签+position:absolute+z-index:2，textarea加padding-left留空；点击图标需手写focus事件；name缺失或结构错乱会导致提交值为空。
layui-textarea 左侧加图标，2.8+ 才支持 layui-textarea-prefix
直接给 <textarea class="layui-textarea"> 加 layui-textarea-prefix 类却没效果？先执行 layui.v 查版本——输出 "2.7.7" 就说明不支持。这个类是 Layui 2.8 版本才内置的，旧版本会完全忽略，图标可能堆在左上角、错位或被遮挡。
必须满足三个前提才能让前缀图标正常显示：
- 外层容器必须是
layui-form-item，不能直接套在div或form上 -
textarea必须带layui-textarea类，否则边框、圆角、高度全不对 -
textarea必须有name属性（如name="remark"），否则 Layui 表单自动收集字段时会跳过该控件
老版本（2.7.x 及更早）只能手动定位图标
用 position: absolute + z-index: 2 是唯一可靠方案，Layui 的样式重置会覆盖 padding 和伪元素，别试图用 ::before 或直接加 padding-left。
正确结构和样式写法：
- 外层
div加position: relative和layui-form-item - 图标用
<i class="layui-icon"></i>（不要用img或 SVG） - 图标加
position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2; -
textarea加padding-left: 36px（留出图标+间距），并确保box-sizing: border-box
示例片段：
<div class="layui-form-item" style="position: relative;"> <i class="layui-icon" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;"></i> <textarea name="remark" class="layui-textarea" style="padding-left: 36px;"></textarea> </div>
图标点击不聚焦 textarea？得手写事件
Layui 不处理图标与 textarea 的联动，点图标默认无反应。必须自己绑定聚焦逻辑：
- 如果图标紧邻
textarea（同级后一个元素），可用：onclick="this.nextElementSibling.focus()" - 若结构复杂（比如图标在
div内），推荐用querySelector定位：onclick="this.closest('.layui-form-item').querySelector('textarea').focus()" - 动态添加的表单项，事件要委托到父容器（如
form），避免重复绑定
注意：别用 for 属性关联图标和 textarea，label[for] 会触发聚焦但也会干扰表单验证逻辑，且 Layui 的 form.render() 可能跳过非标准结构。
提交时字段值为空？大概率是 name 缺失或结构破坏
明明输入了内容，form.on('submit', ...) 拿到的 data.field 却是空对象，问题几乎都出在 DOM 结构上：
-
textarea没写name属性 → Layui 根本不识别这是表单字段 - 把
textarea套进<label>里再插图标 → Layui 会跳过整个嵌套结构，不采集值 - 用
display: none隐藏原生textarea，改用伪元素模拟 → Layui 只读真实 DOM 节点，值永远为空
最稳妥的做法：保持 textarea 是可渲染、有 name、在 layui-form-item 内的直系子元素，图标只是“浮在上面”的装饰层。
