Subscribe

Did you know HTML elements can be editable?

โœ๏ธ

Having some fun with the contenteditable HTML tag

25 Aug, 2020 ยท 2 min read

This is one of the HTML options you don't see often, but are actually really cool.

There is an HTML attribute called contenteditable, and it allows HTML elements to become editable ๐Ÿ™Š.

Let me show you how it looks on this Codepen. (Click any text!)

See the Pen Did you know HTML elements can be editable? by Chris Bongers (@rebelchris) on CodePen.

HTML contenteditable

We can simply make an element editable by adding the contenteditable tag.

<div class="container">
  <h1 contenteditable="true">Welcome click me ๐ŸŽฏ</h1>
  <p contenteditable="true">
    Did you know you can click me to edit my content?<br />
    Even big paragraphs ๐Ÿ‘€
  </p>
  <a contenteditable="true" href="#">View the full article</a>
</div>

It can have three values:

  • contenteditable="true" ~ We can change the content
  • contenteditable="false" ~ Not able to change it
  • contenteditable="inherit" ~ Whatever the parent has

Capturing changes in JavaScript

This is cool but it doesn't do much on its own, so we can use JavaScript to capture the changes.

Let's bind an event listener to the input event for each contenteditable tag.

const contents = document.querySelectorAll('[contenteditable]');

for (let content of contents) {
  content.addEventListener('input', function() {
    console.log('input changed to: ' + content.innerHTML);
  });
}

Browser Support

Since this is a native HTML tag, it has amazing support!

Contenteditable support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Trying out native dialog modals

8 Aug, 2022 ยท 3 min read

Trying out native dialog modals

HTML fallback images on error

6 Aug, 2022 ยท 2 min read

HTML fallback images on error

Join 1829 devs and subscribe to my newsletter