{"id":152,"date":"2024-09-08T13:54:26","date_gmt":"2024-09-08T10:54:26","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/isp\/?p=152"},"modified":"2025-11-20T21:30:57","modified_gmt":"2025-11-20T18:30:57","slug":"atributo-global-contenteditable","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/isp\/2024\/09\/08\/atributo-global-contenteditable\/","title":{"rendered":"Atributo global contenteditable"},"content":{"rendered":"

Informa que el elemento est\u00e1 disponible para que el usuario lo edite; puede eliminar texto e ingresar uno nuevo. Los comandos est\u00e1ndar como deshacer, pegar texto del b\u00fafer, etc. tambi\u00e9n funcionan. Compatible con todos los navegadores. Atributo contenteditable tiene un conjunto fijo de valores, puede ser una cadena vac\u00eda, true o false. Cadena vac\u00eda o true indicar que el elemento es editable.<\/p>\n

<\/p>\n

\"\"<\/p>\n

Significado false indica que el elemento no es editable. Tambi\u00e9n hay un tercer estado \u2014 inherit, Este es el valor predeterminado del atributo y significa que el valor se hereda del elemento principal. Todos los descendientes de este elemento tambi\u00e9n se vuelven editables si el atributo contenteditable obviamente no lo tienen instalado false.<\/p>\n

contenteditable=\u00bbtrue | false\u00bb<\/p>\n

true<\/strong> Habilita el modo de edici\u00f3n.
\nfalse<\/strong> Impide editar un elemento.
\ninherit<\/strong> Un elemento es editable si su padre inmediato es editable.<\/p>\n

En lugar de true es aceptable especificar un valor vac\u00edo (contenteditable=\u00bb\u00bb) o no escribirlo en absoluto (contenteditable).<\/p>\n

Se aplica a las etiquetas:<\/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
Ejemplo<\/h3>\n
HTML<\/strong><\/p>\n
\r\n<p id="myText" contenteditable >Edite el contenido de este campo. Hacer clic Save a \r\nguardar cambios. Hacer clic Reset para devolver el texto original.<\/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":"
Informa que el elemento est\u00e1 disponible para que el usuario lo edite; puede eliminar texto e ingresar uno nuevo. Los comandos est\u00e1ndar como deshacer, pegar texto del b\u00fafer, etc. tambi\u00e9n funcionan. Compatible con todos los navegadores. Atributo contenteditable tiene un conjunto fijo de valores, puede ser una cadena vac\u00eda, true o false. Cadena vac\u00eda o true indicar que el elemento es 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-editar","11":"tag-guardar"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":295,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/posts\/152\/revisions\/295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/isp\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}