Div可編輯並綁定到輸入

Question

v-ajax是我擁有的指令，當您按Submit時，它會自動提交表單。 該表單將獲取我的所有輸入，將其序列化並通過ajax提交。 現在，對於我的一種表單，我不想使用TextArea而是允許使用粗體和斜體，因此我使用的是具有contenteditable屬性的div 。

這是我要完成的工作的簡化版本。

<form v-ajax action="someurl">
    <div contenteditable>{{ message }}</div>
    <input name="content" type="hidden" value="{{ message}}">
    ... bunch  of other inputs...
    <input type="submit" value="Save">
</form>

我的問題是，我該如何做到這一點，以便無論div中的任何人輸入，都會自動使用內容名稱填充輸入的值。

Answer 1

這是一種使用div中鍵入的內容填充隱藏輸入的方法：

首先，您可以訪問它們，為div和隱藏的輸入提供唯一的ID：

<div id="contenteditable" contenteditable>...</div>
...
<input id="content" name="content" type="hidden" value="{{ message}}">

然后使用JavaScript監聽div上的keyup事件，並將輸入的值設置為div中的文本：

var editDiv = document.getElementById('contenteditable');
editDiv.addEventListener( 'keyup', function () {
    var hiddenInput = document.getElementById('content');
    hiddenInput.value = this.textContent;
});

這是一個jsfiddle 。