Html contenteditable=true 的 div 可以通过表单传递吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7355583/
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
Can div with contenteditable=true be passed through form?
提问by JDDll
Can <div contenteditable="true"><a href="page.html">Some</a> Text</div>be used instead of texarea and then passed trough form somehow?
可以<div contenteditable="true"><a href="page.html">Some</a> Text</div>用来代替 texarea 然后以某种方式传递槽形吗？
Ideally without JS
理想情况下没有 JS
回答by smdrager
Using HTML5, how do I use contenteditable fields in a form submission?
使用 HTML5，如何在表单提交中使用 contenteditable 字段？
Content Editable does not work as a form element. Only javascript can allow it to work.
内容可编辑不能用作表单元素。只有 javascript 可以让它工作。
EDIT:In response to your comment... This should work.
编辑：回应你的评论......这应该有效。
<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>
I have tested and verified that this does work in FF and IE9.
我已经测试并验证这在 FF 和 IE9 中确实有效。
回答by Ravinder Payal
Try out this
试试这个
document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;
a full example:-
一个完整的例子：-
<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>
`
`
Instead of this, you can use JQuery (if there is boundation to use JQuery for auto-resizing textarea or any WYSIWYG text editor)
取而代之的是，您可以使用 JQuery（如果有使用 JQuery 自动调整 textarea 或任何 WYSIWYG 文本编辑器的限制）
回答by Nash Carp
You could better use:
你可以更好地使用：
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
}
</script>
NOTE: I changed innerHTMLto innerText. This way you don't get HTML elements and text but only text.
注：我换innerHTML到innerText。这样你就不会得到 HTML 元素和文本，而只会得到文本。
Example: I submited "text", innerHTMLgives the value: "\r\n text". It filters out "text" but it's longer then 4 characters.
innerTextgives the value "text".
示例：我提交了“text”，innerHTML给出了值：“\r\n text”。它过滤掉“文本”，但它长于 4 个字符。
innerText给出值“文本”。
This is useful if you want to count the characters.
如果您想计算字符数，这很有用。
回答by Alberto T.
Without JS it doesn't seem possible unfortunately. If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:
不幸的是，如果没有 JS，这似乎是不可能的。如果有人感兴趣，我用 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. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.
“d-none”是用于显示无的 Boostrap 4 类。就这么简单，然后你可以在一个普通的表单提交过程中获取“gift[main_message]”中 contenteditable 字段的值。我对格式不感兴趣，因此“innerText”对我来说比“innerHTML”更好用。
