{"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":"https:\/\/josh.ev9.org\/weblog\/archives\/780","title":{"rendered":"The contenteditable HTML Attribute"},"content":{"rendered":"<p>Who needs form fields? Now that we have the <a href=\"http:\/\/www.w3.org\/TR\/html5\/editing.html#contenteditable\">contenteditable<\/a> attribute, any element can be editable. Here&#8217;s all you have to do to make a field editable:<\/p>\n<p><code>&lt;div contenteditable&gt;This is editable content. Go ahead, change it.&lt;\/div&gt;<\/code><\/p>\n<p>Which acts just like this area (click the text to edit it):<\/p>\n<p><strong><\/strong><\/p>\n<p><strong><\/p>\n<div contenteditable=\"\">This is editable content. Go ahead, change it.<\/div>\n<p><\/strong><strong><\/strong><strong><\/strong><\/p>\n<p>Pretty cool, right? Remember though, you&#8217;re not in a form, so you&#8217;ll need to submit changes with ajax, or save them locally in the browser (<a href=\"http:\/\/people.w3.org\/mike\/localstorage.html\">Local Storage<\/a>, anyone?). Either way, this is pretty nice.<\/p>\n<p>I also heard a rumor that in HTML6 they&#8217;ll include the <em>contentedible<\/em> attribute, so you&#8217;ll be able to eat elements with ease.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Who needs form fields? Now that we have the contenteditable attribute, any element can be editable. Here&#8217;s all you have to do to make a field editable: &lt;div contenteditable&gt;This is editable content. Go ahead, change it.&lt;\/div&gt; Which acts just like this area (click the text to edit it): This is editable content. Go ahead, change [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/posts\/780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/comments?post=780"}],"version-history":[{"count":9,"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":891,"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/posts\/780\/revisions\/891"}],"wp:attachment":[{"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josh.ev9.org\/weblog\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}