Make Other Elements Content Editable – HTML5 "contenteditable" attribute

hey guys hey going in this video I want to demonstrate the usage of the html5 content editable attribute so essentially this one right here allows your users to edit the contents of an HTML element that is not an input for text area so in a way you can turn other elements that are input elements into input elements it's definitely not going to replace your standard text area and input elements but it can be useful in special cases where particularly you need these styling and flexibility of other elements so let's go inside the text editor right here and I'll show you how I work so I'm going to be using a div as an example so I'll make a new dip here with an ID of something like my du and then we can set the content editable attribute on this div for example we can say content editable just like this and we can say true so unlike other elements or sorry unlike other attributes you can't simply say you know leave it like this and you need to actually say equals true for this to work so now I'm gonna put some content inside here for example some sample content okay then inside the CSS on my is I'll add some styling just to see what's actually going on so I'll target the my div element right here and I'll say a width pop something like 300 px a part of 100 let's give it a font weight of bold a light backgrounds and also a bit of padding just like this so I'm gonna save this and refresh and we can see here the div looks like normal but I can actually click into the div just like this we can see that the caret starts blinking and of course we get the blue outline which means I can start typing inside here okay so and there you go that's basically how it works you can turn other elements into input elements okay so I want to also show you how you can actually interact with this use javascript so back inside here I'll go inside the script tag below first I'll get a reference to my dev site saying comes my dear is equal to document dot get element by ID and pass into my gender just like this so to actually find out if an element is editable or content editable you can simply say console log my dear content editable and this will give you a string true or false save this refresh we can see obviously it is and that is in string form alternatively you can use the is content editable property it does the exact same thing however this one's actually going to be a boolean type save this refresh and we get the same result this one is obviously blue in color because it is a boolean compared to the string form up here and finally with the JavaScript and you can set the attribute by saying my dear content editable is equal to being false for example and that will of course turn off the content editable property I can save this and refresh once again and now obviously I can't actually edit this content and one last thing that I've seen in the documentation quite frequently related to this content editable attribute is the CSS property called character color so I'm going to go down here I'm gonna say carrot color just like this and basically this one lets you change the color of your blinking code for example I can say red just like this I'm gonna save this one and refresh before I just remove this and make this true so I'm gonna save this and refresh now and now we can see the actual carrot is red in color okay and that is basically all for the html5 content editable attribute thanks for watching guys and I'll see you later

2 thoughts on “Make Other Elements Content Editable – HTML5 "contenteditable" attribute

  1. Nice tutorial . as next the tutorial you might expand this project and show to update the content using AJAX. i think this might be very useful for all of us.

Leave a Reply

Your email address will not be published. Required fields are marked *