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 。