contenteditable=""

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O

contenteditable属性は、要素内容が編集可能かどうかを指定します。


<p contenteditable="true">編集可能かどうかを指定します</p>

属性
グローバル属性
contenteditable="" 編集可能かどうか true 編集を可能にする
false 編集できなくする
空文字列 編集を可能にする
  • この属性を省略した場合は、祖先要素の指定内容が継承されます。(祖先要素にも指定がない場合は、ブラウザ側のデフォルトの状態が使用されます)

contenteditable属性を指定すると、通常は編集できない要素であっても、その内容を書き換えることが可能になります。(対応しているブラウザのみ)

例えば、p要素内のテキストを編集可能にすることができます。

指定できる要素

contenteditable属性はグローバル属性のため、HTML5の全ての要素に指定することができます。

使用例

div要素の内容を編集可能にした例
  • 編集した人の環境でのみ、編集内容が反映されることになります。(ソースが書き換わる訳ではありません)

<div contenteditable="true">
対応しているブラウザでは、このテキストを編集することができます。改行も入れることができ、印刷プレビューにも反映されます。
</div>

表示例
対応しているブラウザでは、このテキストを編集することができます。改行も入れることができ、印刷プレビューにも反映されます。