javascript - 通过表单传递一个 contenteditable 元素？

Question

我已经花了几个星期的时间试图找出一种方法来通过“提交”时的表单传递 contenteditable 元素。

• 是的，我知道我可以通过 input/textarea 传递数据，但由于设计原因我不能(不，它不能用简单的 css 解决)

现在我尝试将 contenteditable 元素的值分配给隐藏输入的值，以便在单击提交按钮时它将将从 contenteditable 复制的数据传递到输入中。

问题是在 contenteditable 元素中输入时，隐藏的输入字段不会实时自动更新。

JS

    jQuery(function($) {
            var input = $('#title'),
                preview = $('form-title');

            var input = $('#message'),
                preview = $('form-message');

            input.keyup(function(e) {
                preview.text(input.val());
            });
        });​
/* I tried this and it didn't work:  function getContent(){
        document.getElementById("title").value = document.getElementById("form-title").innerHTML;
    } */

HTML

<h1 contenteditable="true" id="title">Type your title here</h1>
<p contenteditable="true" id="message">messages</p>

<form id="form" method="post">
    <input type="text" name="title" id="form-title" style="display:none;"></input>
    <textarea name="message" id="form-message" style="display:none;"></textarea>
    <input type="submit" id="theSubmit" style="display:none;" value="submit"></input>
</form>

有什么建议吗？请在发布前测试您的答案:) 谢谢!

Answer 1

无需实时更新(出于性能原因，您也不应该)您的输入字段。在表单上使用提交监听器并更新输入值:

var $form = $('form');
$form.submit(function(e) {
    var title = $('#title').text(),
        message = $('#message').text();

    $form.find('input[name="title"]').val(title);
    $form.find('textarea[name="message"]').val(message);
});

JSFiddle