{"id":152,"date":"2024-09-08T13:03:10","date_gmt":"2024-09-08T10:03:10","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/eng\/?p=152"},"modified":"2025-11-20T20:53:14","modified_gmt":"2025-11-20T17:53:14","slug":"global-attribute-contenteditable","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/eng\/2024\/09\/08\/global-attribute-contenteditable\/","title":{"rendered":"Global attribute contenteditable"},"content":{"rendered":"

Informs that the element is available for editing by the user – you can delete text and enter a new one. Standard commands like undo, paste text from the buffer, etc. also work. Compatible with all browsers. Attribute contenteditable has a fixed set of values, it can be an empty string, true or false. Empty string or true indicate that the element is editable.<\/p>\n

<\/p>\n

\"\"<\/p>\n

Meaning false indicates that the element is not editable. There is also a third state \u2014 inherit, this is the attribute’s default value and means that the value is inherited from the parent element. All descendants of this element also become editable if the attribute contenteditable they obviously don’t have it installed in false.<\/p>\n

contenteditable=”true | false”<\/p>\n

true<\/strong> Enables editing mode.
\nfalse<\/strong> Prevents editing an element.
\ninherit<\/strong> An element is editable if its immediate parent is editable.<\/p>\n

Instead of true it is acceptable to specify an empty value (contenteditable=””) or not write it at all (contenteditable).<\/p>\n\n

Applies to tags:<\/p>\n

\r\n<a>, <abbr>, <address>, <area>, <b>, <basefont>, \r\n<bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, \r\n<code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, \r\n<div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, \r\n<h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <input>, <ins>, \r\n<kbd>, <label>, <legend>, <li>, <menu>, <ol>, <option>, \r\n<p>, <pre>, <q>, <samp>, <select>, <span>, <strong>, \r\n<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, \r\n<tfoot>, <th>, <thead>, <tr>, <ul>, <var>\r\n<\/pre>\n
\"\"<\/p>\n
Example<\/h3>\n
HTML<\/strong><\/p>\n
\r\n<p id="myText" contenteditable >Edit the contents of this field. Click Save to \r\nsave changes. Click Reset to return to original text.<\/p>\r\n<button class="btn btn-primary" onclick="saveChanges()">Save<\/button>\r\n<button class="btn btn-warning" onclick="clearStorage()">Reset<\/button>\r\n<\/pre>\n
JavaScript<\/strong><\/p>\n
\r\nvar text = document.getElementById('myText');\r\nvar myData;\r\nvar postData = window.localStorage.getItem("save");\r\nvar reset = text.innerHTML;\r\n\/\/ if no data\r\nif (postData == null || postData == '') {\r\n    myData = text.innerHTML;\r\n    \/\/ store default value\r\n    window.localStorage.setItem("save", myData);\r\n    \/\/ make it placeholder style\r\n    text.classList.remove('changed');\r\n} else {\r\n    \/\/ if there is a value post it\r\n    text.innerHTML = postData;\r\n    \/\/ make dark text\r\n    text.classList.add('changed');\r\n}\r\n\r\nfunction saveChanges() {\r\n    \/\/ store the current value\r\n    myData = text.innerHTML;\r\n    \/\/ local store the value\r\n    window.localStorage.setItem("save", myData);\r\n    text.classList.add('changed');\r\n}\r\n\r\nfunction clearStorage() {\r\n    text.classList.remove('changed');\r\n    \/\/ clear storage\r\n    window.localStorage.clear("save");\r\n    \/\/ return to default text\r\n    text.innerHTML = reset;\r\n}\r\n<\/pre>\n
CSS<\/strong><\/p>\n
\r\np {\r\n    margin: 1em;\r\n    color: #777;\r\n}\r\n\r\np.changed {\r\n    color: black;\r\n}\r\n\r\nbutton {\r\n    margin: 0 1em;\r\n}\r\n\r\n.btn {\r\n  display: inline-block;\r\n  *display: inline;\r\n  padding: 4px 10px 4px;\r\n  margin-bottom: 0;\r\n  *margin-left: .3em;\r\n  font-size: 13px;\r\n  line-height: 18px;\r\n  *line-height: 20px;\r\n  color: #333333;\r\n  text-align: center;\r\n  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  background-color: #f5f5f5;\r\n  *background-color: #e6e6e6;\r\n  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);\r\n  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));\r\n  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);\r\n  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);\r\n  background-image: linear-gradient(top, #ffffff, #e6e6e6);\r\n  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);\r\n  background-repeat: repeat-x;\r\n  border: 1px solid #cccccc;\r\n  *border: 0;\r\n  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\r\n  border-color: #e6e6e6 #e6e6e6 #bfbfbf;\r\n  border-bottom-color: #b3b3b3;\r\n  -webkit-border-radius: 4px;\r\n     -moz-border-radius: 4px;\r\n          border-radius: 4px;\r\n  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);\r\n  filter: progid:dximagetransform.microsoft.gradient(enabled=false);\r\n  *zoom: 1;\r\n  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\r\n     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\r\n          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.btn:hover,\r\n.btn:active,\r\n.btn.active,\r\n.btn.disabled,\r\n.btn[disabled] {\r\n  background-color: #e6e6e6;\r\n  *background-color: #d9d9d9;\r\n}\r\n\r\n.btn:active,\r\n.btn.active {\r\n  background-color: #cccccc \\9;\r\n}\r\n\r\n.btn:first-child {\r\n  *margin-left: 0;\r\n}\r\n\r\n.btn:hover {\r\n  color: #333333;\r\n  text-decoration: none;\r\n  background-color: #e6e6e6;\r\n  *background-color: #d9d9d9;\r\n  \/* Buttons in IE7 don't get borders, so darken on hover *\/\r\n\r\n  background-position: 0 -15px;\r\n  -webkit-transition: background-position 0.1s linear;\r\n     -moz-transition: background-position 0.1s linear;\r\n      -ms-transition: background-position 0.1s linear;\r\n       -o-transition: background-position 0.1s linear;\r\n          transition: background-position 0.1s linear;\r\n}\r\n\r\n.btn:focus {\r\n  outline: thin dotted #333;\r\n  outline: 5px auto -webkit-focus-ring-color;\r\n  outline-offset: -2px;\r\n}\r\n\r\n.btn.active,\r\n.btn:active {\r\n  background-color: #e6e6e6;\r\n  background-color: #d9d9d9 \\9;\r\n  background-image: none;\r\n  outline: 0;\r\n  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\r\n     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\r\n          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n.btn-primary {\r\n  background-color: #0074cc;\r\n  *background-color: #0055cc;\r\n  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);\r\n  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));\r\n  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);\r\n  background-image: -o-linear-gradient(top, #0088cc, #0055cc);\r\n  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);\r\n  background-image: linear-gradient(top, #0088cc, #0055cc);\r\n  background-repeat: repeat-x;\r\n  border-color: #0055cc #0055cc #003580;\r\n  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\r\n  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);\r\n  filter: progid:dximagetransform.microsoft.gradient(enabled=false);\r\n}\r\n\r\n.btn-primary:hover,\r\n.btn-primary:active,\r\n.btn-primary.active,\r\n.btn-primary.disabled,\r\n.btn-primary[disabled] {\r\n  background-color: #0055cc;\r\n  *background-color: #004ab3;\r\n}\r\n\r\n.btn-primary:active,\r\n.btn-primary.active {\r\n  background-color: #004099 \\9;\r\n}\r\n\r\n.btn-warning {\r\n  background-color: #faa732;\r\n  *background-color: #f89406;\r\n  background-image: -ms-linear-gradient(top, #fbb450, #f89406);\r\n  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));\r\n  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);\r\n  background-image: -o-linear-gradient(top, #fbb450, #f89406);\r\n  background-image: -moz-linear-gradient(top, #fbb450, #f89406);\r\n  background-image: linear-gradient(top, #fbb450, #f89406);\r\n  background-repeat: repeat-x;\r\n  border-color: #f89406 #f89406 #ad6704;\r\n  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);\r\n  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);\r\n  filter: progid:dximagetransform.microsoft.gradient(enabled=false);\r\n}\r\n\r\n.btn-warning:hover,\r\n.btn-warning:active,\r\n.btn-warning.active,\r\n.btn-warning.disabled,\r\n.btn-warning[disabled] {\r\n  background-color: #f89406;\r\n  *background-color: #df8505;\r\n}\r\n\r\n.btn-warning:active,\r\n.btn-warning.active {\r\n  background-color: #c67605 \\9;\r\n}\r\n\r\n.btn-primary,\r\n.btn-primary:hover,\r\n.btn-warning,\r\n.btn-warning:hover,\r\n.btn-danger,\r\n.btn-danger:hover,\r\n.btn-success,\r\n.btn-success:hover,\r\n.btn-info,\r\n.btn-info:hover,\r\n.btn-inverse,\r\n.btn-inverse:hover {\r\n  color: #ffffff;\r\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n.btn-primary.active,\r\n.btn-warning.active,\r\n.btn-danger.active,\r\n.btn-success.active,\r\n.btn-info.active,\r\n.btn-inverse.active {\r\n  color: rgba(255, 255, 255, 0.75);\r\n}\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"
Informs that the element is available for editing by the user – you can delete text and enter a new one. Standard commands like undo, paste text from the buffer, etc. also work. Compatible with all browsers. Attribute contenteditable has a fixed set of values, it can be an empty string, true or false. Empty string or true indicate that the element is editable.<\/p>\n","protected":false},"author":1,"featured_media":153,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[50,51,52],"class_list":{"0":"post-152","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-programmirovanie","9":"tag-contenteditable","10":"tag-editing","11":"tag-saving"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/posts\/152\/revisions\/305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/eng\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}