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 $.ajax
function (also $.get
and $.post
). It sends data using simple JS objects.
如果你想让它更简单,试试 jQuery 的$.ajax
函数(还有$.get
和$.post
)。它使用简单的 JS 对象发送数据。