Editable sections in the HTML with the contenteditable attribute

- Andrés Cruz

En español
Editable sections in the HTML with the contenteditable attribute

The contenteditable attribute is one of those hidden attributes or ones that are little known but that can actually be quite useful and it is a simple attribute called contenteditable applicable to any element and, as its name indicates, allows you to establish that the content of an element be editable; Its syntax is the following:

<element contenteditable="true|false">

Practical use of the contenteditable attribute

With the following HTML:

<p contenteditable="true">Edita el siguiente contenido dando un clic sobre este texto.<p>

We obtain:

Edit the following content by clicking on this text.

contenteditable attribute values

As you can deduce from the previous example, it only handles two types of values:

ValueDescription
trueSpecifies that the element is editable.
falseSpecifies that the element is not editable.

This attribute is very useful to create our own word processor by being able to edit any of the elements that make up a web page as some WYSIWYG (acronym for "What You See Is What You Get) plugins for JavaScript do through a div container. :

<div id="editor" contentEditable="true"></div>

contenteditable attribute events

This is a good question, generally when we work with new APIs, technologies or elements, they have certain functionalities that make them unique, including their events; However, the contenteditable attribute does not have specific events for it.

For elements that use the contenteditable attribute we can use existing events such as onfocus and onblur.

Browser Support

This is a crucial point to know if we can use them in our applications without worrying too much about support as in the case of Ambient Light Events with JavaScript; It is a technology that is part of the HTML5 API and has great support with all the most popular browsers since their initial versions:

Attribute     
contenteditableChrome 4.0Internet Explorer 6.0Firefox 3.5Safari 3.1Opera 10.1

Links of interest

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.