textarea提交失败后内容清空的根本原因是页面刷新导致DOM重建，而textarea的值仅存于运行时DOM节点中；服务端回填（写入标签体）、sessionStorage缓存或fetch阻止默认提交是三大解决方案。
textarea 提交失败后内容清空，根本原因是页面刷新
浏览器对 <form></form> 的默认提交行为是：无论成功或失败，只要发生跳转或重载（比如 POST 后服务端返回 400 并渲染原页面），整个 DOM 就重建了。<textarea></textarea> 没有 value 属性来“记住”内容，它的值只存在运行时 DOM 节点的 value 属性里——刷新即丢。这不是 bug，是规范行为。
服务端回填是最稳妥、兼容性最好的方案
后端模板（如 Django/Jinja2/Thymeleaf）必须把用户上次提交的原始内容显式写进 <textarea></textarea> 标签体内部，而不是用 value 属性（它对 <textarea></textarea> 无效）：
<textarea name="content">{{ request.form.content | default('') }}</textarea>
- 注意：必须用双大括号包裹在起始与结束标签之间，不能写成
<textarea value="{{...}}"></textarea> - 如果后端没做这一步，前端任何 JS 都救不回来——因为 DOM 已被新 HTML 替换
- 对多行文本尤其关键：换行符
\n必须原样输出，别被模板引擎自动 trim 或转义
前端用 sessionStorage 自动恢复，适合纯静态页或前后端分离场景
当无法修改后端模板（比如用 GitHub Pages 托管的静态表单），可用 sessionStorage 在刷新前存、加载后取。但要注意几个坑：
- 监听
input事件（不是change），否则粘贴、自动填充等操作会漏存 -
<textarea></textarea>取值直接用el.value，别用innerText或textContent（它们会把换行转为空格） - 恢复时先检查
sessionStorage.getItem(key)是否存在，再赋值，避免覆盖后端已回填的内容 - key 命名建议带表单 ID，例如
form_contact_content，防止多个表单冲突
fetch 提交 + 阻止默认行为，彻底绕过刷新
这是现代 SPA 或轻量交互中最可控的方式：不刷新页面，自然保留所有输入状态。关键三步不能少：
立即学习“前端免费学习笔记（深入）”；
- 给
<form></form>绑定submit事件，第一时间调用event.preventDefault() - 用
new FormData(formEl)收集数据——它能正确处理<textarea></textarea>的换行、file字段、多选 checkbox 等 - 后端返回 JSON 错误时，只更新错误提示区域，不要手动
formEl.reset()或清空<textarea></textarea>
容易忽略的是：如果后端返回的是带错误信息的完整 HTML（而非 JSON），前端又用 JS 把它插入页面，那 <textarea></textarea> 的 DOM 节点就被替换了——之前存的值还在内存里，但节点已失效。这种混合模式反而更难维护。
