{"id":152,"date":"2024-09-08T13:28:04","date_gmt":"2024-09-08T10:28:04","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/fr\/?p=152"},"modified":"2025-11-20T21:23:09","modified_gmt":"2025-11-20T18:23:09","slug":"attribut-global-contenteditable","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/fr\/2024\/09\/08\/attribut-global-contenteditable\/","title":{"rendered":"Attribut global contenteditable"},"content":{"rendered":"

Informe que l’\u00e9l\u00e9ment est disponible pour modification par l’utilisateur – vous pouvez supprimer du texte et en saisir un nouveau. Les commandes standard comme annuler, coller du texte depuis le tampon, etc. fonctionnent \u00e9galement. Compatible avec tous les navigateurs. Attribut contenteditable a un ensemble fixe de valeurs, il peut s’agir d’une cha\u00eene vide, true ou false. Cha\u00eene vide ou true indiquer que l’\u00e9l\u00e9ment est modifiable.<\/p>\n

<\/p>\n

\"\"<\/p>\n

La signification false indique que l’\u00e9l\u00e9ment n’est pas modifiable. Il existe \u00e9galement un troisi\u00e8me \u00e9tat \u2014 inherit, il s’agit de la valeur par d\u00e9faut de l’attribut et signifie que la valeur est h\u00e9rit\u00e9e de l’\u00e9l\u00e9ment parent. Tous les descendants de cet \u00e9l\u00e9ment deviennent \u00e9galement modifiables si l’attribut contenteditable ils ne l’ont \u00e9videmment pas install\u00e9 false.<\/p>\n\n

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

true<\/strong> Active le mode \u00e9dition.
\nfalse<\/strong> Emp\u00eache la modification d’un \u00e9l\u00e9ment.
\ninherit<\/strong> Un \u00e9l\u00e9ment est modifiable si son parent imm\u00e9diat est modifiable.<\/p>\n

Au lieu de true il est acceptable de sp\u00e9cifier une valeur vide (contenteditable=\u00a0\u00bb\u00a0\u00bb) ou ne pas l’\u00e9crire du tout (contenteditable).<\/p>\n

S’applique aux balises:<\/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
Exemple<\/h3>\n
HTML<\/strong><\/p>\n
\r\n<p id="myText" contenteditable >Modifiez le contenu de ce champ. Cliquez Save \u00e0 \r\nenregistrer les modifications. Cliquez Reset pour renvoyer le texte 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":"
Informe que l’\u00e9l\u00e9ment est disponible pour modification par l’utilisateur – vous pouvez supprimer du texte et en saisir un nouveau. Les commandes standard comme annuler, coller du texte depuis le tampon, etc. fonctionnent \u00e9galement. Compatible avec tous les navigateurs. Attribut contenteditable a un ensemble fixe de valeurs, il peut s’agir d’une cha\u00eene vide, true ou false. Cha\u00eene vide ou true indiquer que l’\u00e9l\u00e9ment est modifiable.<\/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-edition","11":"tag-enregistrement"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":294,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/152\/revisions\/294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}