Div contenteditable和綁定到輸入

Question

v-ajax是一個指令，當你按下提交時，它會自動提交表單。表單抓取我的所有輸入，將它們序列化並通過ajax提交。現在爲我的一個表單，而不是使用TextArea我想允許粗體和斜體，所以我使用了div和contenteditable屬性。

下面是我試圖完成的簡化版本。

<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監聽對格的keyup事件，而輸入的值設置爲div中的文字：

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

這裏有一個jsfiddle。