layui文本域怎么设置左侧带图标-Layui教程-PHP中文网

layui-textarea左侧加图标需layui 2.8+，旧版须手动绝对定位；必须满足：外层为layui-form-item、textarea带layui-textarea类且有name属性；图标用标签+position:absolute+z-index:2，textarea加padding-left留空；点击图标需手写focus事件；name缺失或结构错乱会导致提交值为空。

layui文本域怎么设置左侧带图标

layui-textarea 左侧加图标，2.8+ 才支持 `layui-textarea-prefix`

直接给 <textarea class="layui-textarea"></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

示例片段：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

<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() 可能跳过非标准结构。