contenteditable属性

contenteditable属性は、要素の内容を編集可能かどうかを指定するグローバル属性

例えば、p要素のcontenteditable属性にtrueを指定すると、そのp要素内のテキストを編集できるようになる。

ブラウザ対応

構文

<element contenteditable="true|false">
true
要素の内容を編集可能にする。
false
要素の内容を編集可能にしない。

要点

  • 要素の内容を編集可能かどうかを、真偽値(truefalse)で指定する。
  • contenteditable属性を設定しない場合は、親要素の設定を継承する。
  • 全てのHTML要素で使用できるグローバル属性である。
  • HTML5にて新たに導入された属性である。

サンプルコード

編集可能にする

<p contenteditable="true">テキスト</p>

編集可能にしない

<p contenteditable="false">テキスト</p>

サンプル

HTMLソースコード

<p contenteditable="true">編集<b>可能</b>テキスト</p>
<p contenteditable="false">編集<b>不能</b>テキスト</p>

実際の表示

編集可能テキスト

編集不能テキスト

サンプルの動作について

「編集可能テキスト」のテキストを左クリックするなどしてフォーカスを当てると、文字入力用のカーソルが現れ、テキストを編集できる。改行もできる。