Question

我一直在努力想方设法通过'提交'上的表单传递一个满足的元素。

是的我知道我可以通过输入/ 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

通过形式传递一个可满足的元素？

1 个答案: