必须调用form.val()并确保DOM已渲染且form.render('textarea')已执行,否则因layui隐藏原生textarea、仅同步可视层,直接操作value或jQuery.val()无效。

直接用 val() 赋值就行,但得注意 DOM 渲染时机和 layui 表单的二次渲染逻辑 —— 否则内容会“写进去了却看不见”。
为什么 val() 赋值后文本域没更新显示
layui 的 textarea 默认会被 form.render() 处理成带样式包裹的富文本区域(实际是用 div 模拟),原生 textarea 元素被隐藏。直接操作原生元素的 value 或 jQuery 的 val() 只改了隐藏节点,不影响可见层。
- 必须等 layui 完成初始化(
layui.use(['form'], ...)回调内执行) - 赋值后要显式调用
form.val(filter, obj),不能只用$('textarea').val(...) - 如果文本域是动态插入的(比如 Ajax 加载后 append 进来的),还得先
form.render('textarea')
正确写法:用 form.val() + 显式渲染
假设你的表单容器有 lay-filter="demoForm",文本域 name 是 content:
layui.use(['form'], function(){
var form = layui.form;
// 异步加载完成后
$.get('/api/content', function(res) {
// ✅ 正确:通过 form.val 写入,并触发视图更新
form.val('demoForm', {
'content': res.data || ''
});
// ❌ 错误:$('#content').val(res.data) 不生效
});
});
-
form.val()内部会自动识别textarea类型并同步到可视区域 - 如果页面里有多个同名
textarea,它会批量更新所有匹配项 - 不依赖
id,靠name和lay-filter定位,更稳定
动态插入文本域后怎么处理
比如弹层中用 Ajax 加载一段 HTML,里面含 <textarea name="remark"></textarea>,这时要分两步:
- 先插入 HTML:
$('#modal-body').html(htmlStr) - 再渲染表单:
form.render('textarea', 'modal-body')(第二个参数是容器选择器,可选) - 最后赋值:
form.val('modal-form', { remark: loadedData })
漏掉 form.render('textarea') 就会导致 form.val() 找不到目标节点,静默失败。
加载中状态和错误降级别忽略
文本域内容为空或加载失败时,用户容易以为卡住。建议加简单反馈:
- 加载前设 placeholder:
<textarea placeholder="正在加载..."></textarea> - 失败时用
layer.msg()提示,再 fallback 到空字符串:form.val('f', { content: '' }) - 避免在 loading 状态下重复触发请求,可在请求开始时禁用相关按钮或加
data-loading="true"标记
最常被跳过的其实是「动态插入后没 render」这一步 —— 看似写了 form.val(),其实根本没注册进 layui 的表单管理体系里。


















