{"id":152,"date":"2024-09-08T12:31:17","date_gmt":"2024-09-08T09:31:17","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/deu\/?p=152"},"modified":"2025-11-20T21:15:59","modified_gmt":"2025-11-20T18:15:59","slug":"globales-attribut-contenteditable","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/deu\/2024\/09\/08\/globales-attribut-contenteditable\/","title":{"rendered":"Globales Attribut contenteditable"},"content":{"rendered":"

Informiert dar\u00fcber, dass das Element f\u00fcr die Bearbeitung durch den Benutzer verf\u00fcgbar ist \u2013 Sie k\u00f6nnen Text l\u00f6schen und einen neuen eingeben. Standardbefehle wie \u201eR\u00fcckg\u00e4ngig machen\u201c, \u201eText aus dem Puffer einf\u00fcgen\u201c usw. funktionieren ebenfalls mit allen Browsern. Attribut contenteditable hat einen festen Satz von Werten, es kann eine leere Zeichenfolge sein, true oder false. Leere Zeichenfolge oder true geben an, dass das Element bearbeitet werden kann.<\/p>\n

<\/p>\n

\"\"<\/p>\n

Bedeutung false zeigt an, dass das Element nicht bearbeitet werden kann. Es gibt auch einen dritten Staat \u2014 inherit, dies ist der Standardwert des Attributs und bedeutet, dass der Wert vom \u00fcbergeordneten Element geerbt wird. Alle Nachkommen dieses Elements werden ebenfalls bearbeitbar, wenn das Attribut contenteditable sie haben es offensichtlich nicht installiert false.<\/p>\n

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

true<\/strong> Aktiviert den Bearbeitungsmodus.
\nfalse<\/strong> Verhindert das Bearbeiten eines Elements.
\ninherit<\/strong> Ein Element ist bearbeitbar, wenn sein unmittelbares \u00fcbergeordnetes Element bearbeitbar ist.<\/p>\n

Anstatt true es ist akzeptabel, einen leeren Wert anzugeben (contenteditable=““) oder schreibe es \u00fcberhaupt nicht (contenteditable).<\/p>\n

Gilt f\u00fcr 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\n
Beispiel<\/h3>\n
HTML<\/strong><\/p>\n
\r\n<p id="myText" contenteditable >Bearbeiten Sie den Inhalt dieses Feldes. Klicken Save zu \r\n\u00c4nderungen speichern. Klicken Reset um den Originaltext zur\u00fcckzugeben.<\/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":"
Informiert dar\u00fcber, dass das Element f\u00fcr die Bearbeitung durch den Benutzer verf\u00fcgbar ist \u2013 Sie k\u00f6nnen Text l\u00f6schen und einen neuen eingeben. Standardbefehle wie \u201eR\u00fcckg\u00e4ngig machen\u201c, \u201eText aus dem Puffer einf\u00fcgen\u201c usw. funktionieren ebenfalls mit allen Browsern. Attribut contenteditable hat einen festen Satz von Werten, es kann eine leere Zeichenfolge sein, true oder false. Leere Zeichenfolge oder true geben an, dass das Element bearbeitet werden kann.<\/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":[51,50,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-bearbeiten","10":"tag-contenteditable","11":"tag-speichern"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":298,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/152\/revisions\/298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}