Question

所以我有一堆从db动态填充的段落元素。我已经使元素满足。我现在想通过标准表单提交来编辑数据库。有没有办法将可疑元素发布回来？

Answer 1

你必须以某种方式使用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()'>...

Answer 2

如果有人感兴趣，我会为VueJS修补一个类似问题的解决方案。就我而言，我有：

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

在“数据”中，您可以为mainMessage设置默认值，在我拥有的方法中：

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

“ d-none”是Boostrap 4类，不显示。如此简单，例如，您可以在正常表单提交期间获取“ gift [main_message]”中contenteditable字段的值，而无需AJAX。我对格式不感兴趣，因此“ innerText”比“ innerHTML”更好。

Answer 3

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

在您的点击功能中，使用ajax“post”将其发布到服务器端脚本，以将其插入数据库。

Example

Answer 4

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

如果您想要更简单，请尝试jQuery的http://coliru.stacked-crooked.com/a/b25a84454d53d8de功能（同时$.get和$.post）。它使用简单的JS对象发送数据。

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

4 个答案: