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:
| Value | Description |
|---|---|
| true | Specifies that the element is editable. |
| false | Specifies 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 | |||||
|---|---|---|---|---|---|
| contenteditable | Chrome 4.0 | Internet Explorer 6.0 | Firefox 3.5 | Safari 3.1 | Opera 10.1 |
Links of interest
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter