Html 使用 HTML5，如何在表单提交中使用 contenteditable 字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6247702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using HTML5, how do I use contenteditable fields in a form submission?
提问by MFB
So I have a bunch of paragraph elements which are dynamically populated from a db. I have made the elements contenteditable. I now want to submit edits back the the db via a standard form submission. Is there a way to post the contenteditable elements back?
所以我有一堆从数据库动态填充的段落元素。我已经使元素内容可编辑。我现在想通过标准表单提交将编辑提交回数据库。有没有办法将 contenteditable 元素发布回来？
采纳答案by rob
You have to use javascript one way or the other, it won't work as a "standard" form element as it would with a textarea or the like. If you like, you could make a hidden textarea within your form, and in the form's onsubmit function copy the innerHTML of the contenteditable to the textarea's value. Alternatively you could use ajax/xmlHttpRqeuest to submit the stuff a bit more manually.
您必须以一种或另一种方式使用 javascript，它不会像使用 textarea 等那样作为“标准”表单元素工作。如果愿意，您可以在表单中创建一个隐藏的 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()'>...
回答by Alberto T.
If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:
如果有人感兴趣，我用 VueJS 修补了一个类似问题的解决方案。就我而言，我有：
<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>
In "data" you can set a default value for mainMessage, and in methods I have:
在“数据”中，您可以为 mainMessage 设置默认值，在我的方法中：
methods: {
updateMainMessage: function(e) {
this.mainMessage = e.target.innerText;
}
}
"d-none" is a Boostrap 4 class for display none. Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example, no AJAX required. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.
“d-none”是用于显示无的 Boostrap 4 类。就这么简单，然后您可以在正常表单提交期间获取“gift[main_message]”中的 contenteditable 字段的值，例如，不需要 AJAX。我对格式不感兴趣，因此“innerText”对我来说比“innerHTML”更好用。
回答by byeolbit.99
Does it NEED to be standard form submission? If you cannot or do not want use a form with inputs, you may try AJAX (XMLHttpRequest + FormData), through which you could perform asynchronous requests and control better how response shows up.
是否需要标准表单提交？如果您不能或不想使用带有输入的表单，您可以尝试 AJAX (XMLHttpRequest + FormData)，通过它您可以执行异步请求并更好地控制响应的显示方式。
If you want it even simpler, try jQuery's $.ajaxfunction (also $.getand $.post). It sends data using simple JS objects.
如果你想让它更简单，试试 jQuery 的$.ajax函数（还有$.get和$.post）。它使用简单的 JS 对象发送数据。
