Question

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

理想情况下没有JS

Answer 1

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

内容可编辑不适用于表单元素。只有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中有效。

Answer 2

试试这个

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文本编辑器的大小）

Answer 3

你最好使用：

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

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

示例：我提交了＆＃34; text＆＃34;，innerHTML给出了值：＆＃34; \ r \ n text＆＃34;。它会过滤掉＆＃34; text＆＃34;但它超过了4个字符。 innerText给出值＆＃34; text＆＃34;。

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

Answer 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”更好。

具有contenteditable = true的div可以通过表单传递吗？

4 个答案: