使用HTML5，如何在表单提交中使用contenteditable字段？

所以我有一堆从数据库dynamic填充的段落元素。 我已经让这些元素令人满意。 我现在想通过标准的表单提交将编辑提交回数据库。 有没有办法发布contenteditable元素回来？

Answer 1

你必须使用JavaScript或其他方式，它不会像使用textarea或类似的东西那样用作“标准”表单元素。 如果你喜欢，你可以在你的表单中创build一个隐藏的textarea，并在表单的onsubmit函数中将contenteditable的innerHTML复制到textarea的值。 或者，您可以使用ajax / xmlHttpRqeuest更手动地提交这些东西。

function copyContent () { document.getElementById("hiddenTextarea").value = document.getElementById("myContentEditable").innerHTML; return true; } <form action='whatever' onsubmit='return copyContent()'>... 

Answer 2

如果你使用jQuery，你可以用.click（）事件（即“保存”或“提交”）提交内容…）

在你的点击function中，使用ajax“post”将其发送到服务器端脚本，将其插入到数据库中。

例

Answer 3

是否需要提交标准表单？ 如果你不能或不想使用input的表单，你可以尝试AJAX（XMLHttpRequest + FormData），通过它你可以执行asynchronous请求并更好地控制响应显示。

如果你想要更简单的话，试试jQuery的$.ajax函数（也是$.get和$.post ）。 它使用简单的JS对象发送数据。