HTML: Content Editable

Using HTML5 contentEditable you can make HTML markup editable by the user. Using a content editable div gives you more flexibility than just using an input or textarea as you can put other elements in a contenteditable div.

<div contentEditable="true">Click or tap on me to change my content. You can then type in anything you want.</div>

Click or tap on me to change my content. You can then type in anything you want.

Using Javascript you can add an event onto the content editable element to listen for changes and do something with that content.

const content = document.querySelector('[contenteditable]');
content.addEventListener('input', function(event) {
  console.log(content.innerHTML)
})