HTML5：contenteditable属性

空の文字列および true キーワードは、true 状態に対応する。false キーワードは、false 状態に対応する。さらに、inherit 状態という第 3 の状態が存在する。これは欠損値のデフォルトおよび不正値のデフォルトである。

true 状態は、要素が編集可能であることを示す。inherit 状態は、その親が存在する場合、要素が編集可能であることを示す。false 状態は、要素が編集可能でないことを示す。

例

キーワード	状態	備考
空の文字列、 `true`	true	要素が編集可能である
`false`	false	要素が編集可能でない
`inherit`	inherit	親要素を設定を継承する。

たとえば、ユーザーがHTMLを使用する記事を書くことが期待される、新しい記事を公開するために FORM および TEXTAREA を持つページを考えてみる：

<FORM method=POST>
 <FIELDSET>
  <LEGEND>New article</LEGEND>
  <TEXTAREA name=article><P>Hello world.</P></TEXTAREA>
 </FIELDSET>
 <P><BUTTON>Publish</BUTTON></P>
</FORM>

　↓

<FORM method=POST>
 <FIELDSET>
  <LEGEND>New article</LEGEND>
  <TEXTAREA id=textarea name=article><P>Hello world.</P></TEXTAREA>
  <DIV id=div style="white-space: pre-wrap" hidden><P>Hello world.</P></DIV>
  <SCRIPT>
   let textarea = document.getElementById("textarea");
   let div = document.getElementById("div");
   textarea.hidden = true;
   div.hidden = false;
   div.contentEditable = "true";
   div.oninput = (e) => {
     textarea.value = div.innerHTML;
   };
  </SCRIPT>
 </FIELDSET>
 <P><BUTTON>Publish</BUTTON></P>
</FORM>

HTML5

グローバル属性

contenteditable

解説

例

テスト

スクリプト：

スクリプト：