contenteditable - 要素が編集可能か否かを指定する

contenteditableは、要素が編集可能か否かを指定するためのグローバル属性です。truefalse、または空の値を指定でき、false以外は「編集可能」となります。論理属性ではないので、混同しないようにしましょう。編集可能な要素は、クリックすると、テキストの内容を自由に編集できます。

説明

下記は、p要素にcontenteditable属性を指定した例です。空の値と、trueを指定したp要素は編集可能になっているのを確認して下さい。

HTML

<p contenteditable="">空の値を指定したので、編集可能だと思います。</p>
<p contenteditable="true"><code>true</code>を指定したので、編集可能だと思います。</p>
<p contenteditable="false"><code>false</code>を指定したので、編集できないと思います。</p>

空の値を指定したので、編集可能だと思います。

trueを指定したので、編集可能だと思います。

falseを指定したので、編集できないと思います。

継承する

子は親のcontenteditable属性を継承します。例えば、下記は3つのp要素をdiv要素でまとめたものです。親であるdiv要素のcontenteditable属性に真の値を指定したため、子である3つのp要素もそれを継承して編集可能になっています。

HTML

<div contenteditable="true">
	<p>空の値を指定したので、編集可能だと思います。</p>
	<p><code>true</code>を指定したので、編集可能だと思います。</p>
	<p><code>false</code>を指定したので、編集できないと思います。</p>
</div>

空の値を指定したので、編集可能だと思います。

trueを指定したので、編集可能だと思います。

falseを指定したので、編集できないと思います。

下記は2つ目のp要素のcontenteditable属性に偽の値を指定したものです。このp要素だけ、親のcontenteditable属性を継承していません。編集不可能になっているのを確認して下さい。このp要素は編集できませんが、親であるdiv要素が編集可能なため、丸ごと削除することはできます。

HTML

<div contenteditable="true">
	<p>空の値を指定したので、編集可能だと思います。</p>
	<p contenteditable="false"><code>true</code>を指定したので、編集可能だと思います。</p>
	<p><code>false</code>を指定したので、編集できないと思います。</p>
</div>

空の値を指定したので、編集可能だと思います。

trueを指定したので、編集可能だと思います。

falseを指定したので、編集できないと思います。

参考情報

contenteditable属性に関する情報は、下記ページで確認できます。

  • W3C … W3Cによる勧告案。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。
  • Can I use … 各ブラウザの対応状況、不具合情報について。