{"id":780,"date":"2010-09-17T10:12:53","date_gmt":"2010-09-17T15:12:53","guid":{"rendered":"http:\/\/josh.ev9.org\/weblog\/?p=780"},"modified":"2022-02-18T15:52:08","modified_gmt":"2022-02-18T20:52:08","slug":"contenteditable","status":"publish","type":"post","link":"http:\/\/josh.ev9.org\/weblog\/archives\/780","title":{"rendered":"The contenteditable HTML Attribute"},"content":{"rendered":"

Who needs form fields? Now that we have the contenteditable<\/a> attribute, any element can be editable. Here’s all you have to do to make a field editable:<\/p>\n

<div contenteditable>This is editable content. Go ahead, change it.<\/div><\/code><\/p>\n

Which acts just like this area (click the text to edit it):<\/p>\n

<\/strong><\/p>\n

<\/p>\n

This is editable content. Go ahead, change it.<\/div>\n

<\/strong><\/strong><\/strong><\/p>\n

Pretty cool, right? Remember though, you’re not in a form, so you’ll need to submit changes with ajax, or save them locally in the browser (Local Storage<\/a>, anyone?). Either way, this is pretty nice.<\/p>\n

I also heard a rumor that in HTML6 they’ll include the contentedible<\/em> attribute, so you’ll be able to eat elements with ease.<\/p>\n","protected":false},"excerpt":{"rendered":"

Who needs form fields? Now that we have the contenteditable attribute, any element can be editable. Here’s all you have to do to make a field editable: <div contenteditable>This is editable content. Go ahead, change it.<\/div> Which acts just like this area (click the text to edit it): This is editable content. Go ahead, change […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[23,21,12,39],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-free-design-idea","category-professional","category-technology","category-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t