textarea 不走 form.val() 回显,因其被 layui 视为纯文本容器,无 value 属性,form.val() 对其只读不写;应直接用 .val()(纯文本)或 .html()(富文本)操作 dom。

直接给 <textarea></textarea> 的 innerHTML 赋值即可,不需要调用 form.val() 或任何 layui 表单方法。
为什么 textarea 不走 form.val() 回显
Layui 的 form.val() 确实能处理 input、select、radio、checkbox,但它对 textarea 的支持是“只读取不写入”——也就是说,form.val('filter', { content: 'xxx' }) 会静默忽略 content 字段,不会报错,也不会生效。
根本原因是:Layui 把 textarea 视为纯文本容器,其值由 DOM 的 textContent 或 innerHTML 控制,而非 value 属性(它没有 value 属性)。
- 错误写法:
form.val('myForm', { content: data.content });→ 完全无效 - 正确写法:
$('textarea[name="content"]').val(data.content);或直接操作 innerHTML
回显时如何保留换行和 HTML 标签(比如富文本)
如果你存的是纯文本(如 MySQL 的 TEXT 字段),直接用 .val() 即可,换行符 \n 会被浏览器自动转为 <br> 渲染;但若存的是带标签的富文本(如 <p>Hello</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2334" title="MySQL"><img
src="https://img.php.cn/upload/skill/000/000/081/178900927846657.jpg" alt="MySQL" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill2334" title="MySQL" class="overflowclass">MySQL</a>
<p class="overflowclass">编写正确的MySQL查询,避免字符集、索引和锁方面的常见陷阱。</p>
</div>
<a rel="nofollow" href="/xiazai/skill2334" title="MySQL" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>),必须用 .html() 或设置 innerHTML,否则标签会被当作文本显示。
- 纯文本回显:
$('textarea[name="content"]').val(data.content); - 富文本回显(含
<img>、<p></p>等):$('textarea[name="content"]').html(data.content); - 模板引擎中(如 Thymeleaf、Freemarker):
<textarea name="content">${data.content}</textarea>—— 这种方式天然支持 HTML 插入
注意 MySQL 数据中的特殊字符和 XSS 风险
从 MySQL 读出的 TEXT 字段可能含单引号、双引号、、<code>> 等。如果用 JS 赋值(.val() 或 .html()),必须确保后端已做转义或前端做了安全处理。
- 若后端返回的是 JSON,且字段未转义(如
"content": "<script>alert(1)</script>"),直接.html()会执行脚本 → 必须用.text()或手动 HTML 编码 - 推荐做法:后端返回纯文本时,前端一律用
.val();返回富文本时,确认内容可信(如管理员编辑),再用.html() - 避免在 JS 中拼接 HTML:
$('textarea').html('<div>' + data.content + '</div>')→ 可能被注入,应改用$('textarea').text(data.content)或 DOM API 创建
真正容易被忽略的点是:很多人以为所有表单元素都统一走 form.val(),结果 textarea 死活不回显,又去查文档、重载 form 模块、甚至怀疑数据没拿到——其实就差一行 .val() 调用。










