通过形式传递contenteditable元素？

我一直在努力寻找一种方式，通过'提交'表单传递一个contenteditable元素。通过形式传递contenteditable元素？

是的，我知道我可以通过输入/ textarea的数据，但我不能因为设计的原因（没有它不能用简单的CSS来解决）

现在的我m试图将contenteditable元素的值赋给隐藏输入的值，这样当点击submit按钮时，它将把从contenteditable复制的数据传递到输入中。

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

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>

有什么建议？请在发帖前测试你的答案:)谢谢！

来源

2015-09-04 Steve Gates

的可能重复（HTTP [使用HTML5，我怎么使用的表单提交CONTENTEDITABLE领域？]：//计算器。 com/questions/6247702/use-html5-how-do-i-use-contenteditable-fields-in-a-form-submission） – HPierce

@HPierce它不是重复的，因为如果你对这个问题的答案是关于我的具体的问题（我不会问是否有答案），你会看到解决方案不起作用。但皮尔斯干得好，保持它:) –

你的问题似乎没有解释为什么解决方案不起作用 - 也没有证据表明你的问题表明你甚至已经尝试过。（因此，@Sam为什么给你一个类似于被接受的答案的答案） – HPierce

无需进行实时更新（出于性能原因，您不应该）输入字段。使用表单上的提交听众和更新的输入值：

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

来源

2015-09-04 17:38:16 Sam

Gj Sam非常感谢 –

通过形式传递contenteditable元素？

回答

相关问题