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

所以我有一堆从数据库动态填充的段落元素。我让这些元素令人满意。我现在想通过标准表单提交将编辑提交回数据库。有没有办法发布contenteditable元素回来？使用HTML5，如何在表单提交中使用contenteditable字段？

2011-06-06 MFB

你必须使用JavaScript的一种方式或其他，因为它会用一个文本或像它不会作为“标准”的表单元素的工作。如果你喜欢，你可以在你的表单中创建一个隐藏的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()'>...

来源

2011-06-06 04:34:49 rob

看来最好使用'innerText'，否则你会把所有不可见的标记放到textarea中。 – 2017-03-10 19:24:41

就是这一点。你需要所有的标记，为什么你会使用contentEditable？记住textarea是隐藏的，它只是用来保存内容发送到服务器之前。 – rob 2017-03-10 23:00:13

如果使用jQuery的，你可以用。点击（）事件中使用所提交的内容（即“保存”或“提交” ...）

在你点击功能将其发布到服务器端脚本一个ajax“post”将它插入到你的数据库中。

Example

来源

2011-06-06 04:29:22 Sparkup

您的链接已死亡。如果你能以某种方式挽回该链接后面的内容并在你的文章中进行编辑，那就太棒了。如果没有，请删除链接并编辑您的答案。 – rene 2016-06-11 08:30:30

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

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

来源

2017-10-10 20:16:56

使用FormData的XHR示例：https：//developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects – 2017-10-10 20:19:50

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

回答

相关问题