javascript - 如何从 contentEditable div 获取 html 以进入隐藏的文本表单元素？

Question

我不相信您可以直接使用来自内容可编辑 div 的输入并将其提交到表单中，所以我认为我可以只使用一个隐藏的文本字段并执行以下操作：

var blog_post = $("#editable_div").html();
$('#hidden_text_area').val(blog_post);

有谁知道这样做的方法？它不适用于我所拥有的。我认为可能$('#hidden_text_area').val(blog_post);需要由事件触发，但我点击尝试它并没有奏效。

$('#clicker').click(function(){
  $('#hidden_text_area').val(blog_post);
})

Answer 1

尝试：

$('#clicker').click(function(){
 var blog_post = $("#editable_div").html();
 $('#hidden_text_area').val(blog_post);
})

因为当您单击此按钮时，您的 blog_post 变量看起来并不包含 html 内容。

Answer 2

请检查 alert($('#hidden_​​text_area')) 是否给出对象。如果它没有给出对象，那么它就有问题，否则 $('#hidden_​​text_area').val(blog_post); 应该管用。

Answer 3

似乎对我来说效果很好，但是，请注意 value 属性中的 html 将被转义：

HTML：

<textarea id="content">
    <p style="background-color: blue;">Testing</p>
</textarea>
<input type="button" value="hit me" id="btn" />
<div id="parent">
    <input type="text" name="testinput" id="inputtest" value="" />
</div>

JS：

$("#btn").click(function () {
    var html_contents = $("#content").html();
    $("#inputtest").val(html_contents);
});