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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:57:13  来源:igfitidea点击:

Using HTML5, how do I use contenteditable fields in a form submission?

htmlcontenteditable

提问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 对象发送数据。