🔥 NEW Code Tidbit Every Week 🔥

# Make a HTML element editable with contenteditable

Apply the contenteditable attribute to any HTML element. Voila! You can now edit them similar to how a <input> or <textarea> would work 👍

This is cool for creating a seamless smooth editing experience for your user. They can simple click the element and make the update to the text immediately. If you had done it with your standard <textarea> or <input>, you have the additional steps of using some JS to toggle between the different types of elements, or some sort of CSS styling to make it look less textarea-ish, if you know what I mean lol 😂

<p contenteditable="true">...</p>

# contenteditable Attribute Values

There can be 3 different values:

<p contenteditable="true">
  Element is editable
</p>

<p contenteditable="false">
  Element is NOT editable
</p>

<p contenteditable="inherit">
  Element inherits its parent's editable status
</p>

# contenteditable Events

To retrieve the text from the contendeditable element, you will need to attach an event listener. The input event will fire every time the content of the contenteditable changes.

<p contenteditable="true">
  Hello
</p>
var content = document.querySelector('[contenteditable]');

// 1. Listen for changes of the contenteditable element
content.addEventListener('input', function(event) {
  // 2. Retrive the text from inside the element
  console.log(content.innerHTML);
});

# Rich-Text Editing with contenteditable

A great use case is to use the property to turn your read-only HTML element into a rich text editor. This allows your user to read the content and edit as they please. Pretty neat 👍

# Resources


Related Tidbits