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监听div上的keyup事件，并将输入的值设置为div中的文本：

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

这里是jsfiddle。

Div contenteditable和绑定到输入

1 个答案: