Div contenteditable 并绑定到输入答案

【问题标题】：Div contenteditable and binding to an inputDiv contenteditable 并绑定到输入
【发布时间】：2016-02-22 21:06:43
【问题描述】：

v-ajax 是我的一个指令，当你按下提交时它会自动提交表单。表单获取我所有的输入，将它们序列化并通过 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 中的人输入的任何内容自动填充输入的值与内容的名称。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这是一种使用 div 中键入的内容填充隐藏输入的方法：

首先，您可以访问它们，为 div 和隐藏的输入提供唯一 ID：

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

然后使用JavaScript监听div上的keyup事件，并将input的值设置为div中的文本：

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

这是jsfiddle。

【讨论】：