The hidden text editor in CSS “Contenteditable”

Image for post
Image for post
Photo by Gage Walker on Unsplash

In my previous post, I wrote about HTML accesskey attribute. Now another HTML global attribute is “Contenteditable” which is somewhat hidden attribute in HTML. Let’s dig into it.

What is contenteditable ?

contenteditable attribute is somewhat like html input,textarea tag. But what makes it different from other is that it can change the content of a tag directly like a text editor. User don’t need to submit or save after editing/changing texty. It will happen automatically. Didn’t understand? Its ok. Let’s learn by example.

First we create a html file with a p tag like this

Notice the attribute contenteditable. I set it to “true”. It means I can edit this “p” tag on the browser. If I set it to false I can’t edit it. There is another value which is “inherit” .But “inherit” is useless. so forget about it. Now go to your browser and try to edit the content of p tag. Isn’t it fun?

How will I retrive this text?

To retrive text we need to add an event listener in the “p” tag . We add “input” event in content.

Now go to console and try to change the content of “p” tag in the browser. Every time you type something , content gets updated automatically in console because we added “input” as eventListeners. Its fun,isn’t it?

Thanks for reading.

Written by

Front-End Developer & Tech Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store