contenteditable属性

contenteditableとは

contenteditableは、pなど編集できない要素に対して、編集ができるようにします。

グローバル属性のため、すべてのHTML要素で使えます。

利用できる値は、以下です。

親要素から継承されるため、子要素で編集可否を変える場合は、値を変えて指定する必要があります。

利用例

contenteditableの利用例は、以下のとおりです。

<p contenteditable="true">テストです。</p>

上記により、「テストです。」をユーザで編集できるようになります。

実行例

以下は、p要素での実行例です。横幅と高さは別に指定しています。

「テストです。」の上でクリックすると、編集ができるようになります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。