[Vuejs]-Div contenteditable and binding to an input

by

0👍

Here’s one way to populate the hidden input with whatever’s typed into the div:

First, so you can access them, give the div and hidden input unique IDs:

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

Then use JavaScript to listen for keyup events on the div, and set the input’s value to the text in the div:

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

Here’s a jsfiddle.

Leave a comment