contenteditable 元素本身不会随表单提交，需通过隐藏 字段同步内容并参与提交。本文提供完整、可靠的解决方案，包含 HTML 结构、JavaScript 同步逻辑及关键注意事项。

`contenteditable` 元素本身不会随表单提交，需通过隐藏 `` 字段同步内容并参与提交。本文提供完整、可靠的解决方案，包含 html 结构、javascript 同步逻辑及关键注意事项。

在 HTML 表单开发中，contenteditable="true" 常用于实现富文本编辑体验（如内联编辑、所见即所得评论），但它有一个关键限制：浏览器原生不将 contenteditable 元素的值纳入 form.submit() 或 FormData 提交数据中——只有表单控件（如 <input>、<textarea></textarea>、<select></select>）才会被自动序列化。

因此，若你希望保留可编辑语义，又确保数据能被后端接收，推荐采用「影子输入框」（shadow input）方案：为每个 contenteditable 元素配对一个同名的隐藏 <input>，并通过事件实时/提交前同步其 textContent（或 innerText）到隐藏字段的 value 中。

✅ 推荐实现（增强版，修复原示例缺陷）：

jQuery金融借款单提交表单

jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

You Favorite Movie

Your Comment

Submit

<script> // 使用 input + blur 双事件保障同步可靠性（避免仅依赖 onchange，因 contenteditable 不触发原生 onchange） function syncContenteditable(elementId, inputId) { const el = document.getElementById(elementId); const input = document.getElementById(inputId); if (el && input) { input.value = el.textContent.trim(); // 使用 textContent 避免 HTML 标签污染 } } // 绑定事件：实时响应输入（input），并在失焦时兜底（blur） document.getElementById('name').addEventListener('input', () => syncContenteditable('name', 'nameInput')); document.getElementById('name').addEventListener('blur', () => syncContenteditable('name', 'nameInput')); document.getElementById('comment').addEventListener('input', () => syncContenteditable('comment', 'commentInput')); document.getElementById('comment').addEventListener('blur', () => syncContenteditable('comment', 'commentInput')); // 关键：提交前再次校验（防止快速提交导致异步延迟遗漏） document.getElementById('myForm').addEventListener('submit', function(e) { syncContenteditable('name', 'nameInput'); syncContenteditable('comment', 'commentInput'); }); </script>

⚠️ 注意事项：

• 不要依赖 onchange 属性：contenteditable 元素不触发原生 change 事件，onchange 属性无效；应使用 input（实时）+ blur（失焦）组合监听。
• 优先用 textContent 而非 innerHTML：避免 XSS 风险与标签混入表单值；如需富文本，请后端做安全过滤或改用 <textarea></textarea> + Markdown/WYSIWYG 编辑器。
• <form></form> 标签必须正确闭合：原问题中末尾为 <form></form>（应为 ），语法错误会导致 DOM 解析异常。
• 建议显式声明 button type="submit"：防止意外触发默认行为或与其他按钮混淆。

? 扩展提示：若项目已使用现代框架（如 React/Vue），可封装为受控组件；纯前端场景下，该方案兼容所有主流浏览器（Chrome/Firefox/Safari/Edge），且无需第三方库。