contenteditable=true 的 div 可以通过表单传递吗？答案

【问题标题】：Can div with contenteditable=true be passed through form?contenteditable=true 的 div 可以通过表单传递吗？
【发布时间】：2011-11-13 09:51:21
【问题描述】：

可以使用<div contenteditable="true"><a href="page.html">Some</a> Text</div> 代替 texarea 然后以某种方式通过槽形式吗？

最好不用 JS

【问题讨论】：

Using HTML5, how do I use contenteditable fields in a form submission? 的可能重复项
恕我直言，我认为contenteditable 几乎没用，因为它不能像其他输入一样包含在表单中。你需要一堆 JS 来实现它。

标签： html

【解决方案1】：

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

Content Editable 不能用作表单元素。只有 javascript 可以让它工作。

编辑：回应您的评论...这应该有效。

<script>
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("my-content").innerHTML;
    }
</script>


<div id="my-content" contenteditable="true"><a href="page.html">Some</a> Text</div>

<form action="some-page.php" onsubmit="return getContent()">
    <textarea id="my-textarea" style="display:none"></textarea>
    <input type="submit" />
</form>

我已经测试并验证了这在 FF 和 IE9 中确实有效。

【讨论】：

我应该如何处理 JS（不是 jquery）才能使其工作？ document.getElementById('contentTextArea').value = document.getElementById('contentDiv').value;这不起作用
嗯，没错，div 没有“值”属性。我稍后会更新我的答案。
在安全方面，contentedtiable 安全吗？不需要忽略它，因为它已经被忽略了？
如果文本很大并且由于内存或字符限制而冻结文本区域，例如导入 2 列的 1MB csv，有什么替代方法

【解决方案2】：

你可以更好地使用：

<script>
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
    }
</script>

注意：我将innerHTML 更改为innerText。这样您就不会获得 HTML 元素和文本，而只会获得文本。

示例：我提交了“文本”，innerHTML 给出了值：“\r\n 文本”。它过滤掉“文本”，但它长于 4 个字符。 innerText 给出值“文本”。

如果您想计算字符数，这很有用。

【讨论】：

【解决方案3】：

试试这个

document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;

一个完整的例子：-

<script>
    function getContent() {
        var div_val = document.getElementById("editablediv").innerHTML;
        document.getElementById("formtextarea").value = div_val;
        if (div_val == '') {
            //alert("option alert or show error message")
            return false;
            //empty form will not be submitted. You can also alert this message like this.
        }
    }
</script>

<div id="editablediv" contenteditable="true">
<a href="page.html">Some</a> Text</div>
<form id="form" action="action.php" onsubmit="return getContent()">
    <textarea id="formtextarea" style="display:none"></textarea>
    <input type="submit" />
</form>

除此之外，您可以使用 JQuery（如果有限制使用 JQuery 来自动调整 textarea 或任何 WYSIWYG 文本编辑器）

【讨论】：

【解决方案4】：

不幸的是，如果没有 JS，这似乎是不可能的。如果有人感兴趣，我用 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 字段的值。我对格式不感兴趣，因此“innerText”对我来说比“innerHTML”效果更好。

【讨论】：