定義と使い方

contenteditable属性は
要素のコンテンツを編集できるかどうかを指定します。
この属性はtrueに設定すると要素のコンテンツを編集でき、falseに設定すると編集できません。

contenteditable属性はHTML要素のグローバル属性の一つであり、ユーザーが該当要素内のテキストやコンテンツを直接編集できるようにする属性です。

この属性を使用すると、ウェブページ上で簡単なテキスト編集が可能になります。JavaScriptと組み合わせることで、インラインテキストエディターを作成することもできます。

基本の例

HTML 
<div contenteditable="true" style="padding: 15px; background: #eee; border-radius: 5px;">
    この内容を直接編集してみてください。
</div>
ブラウザで実際に表示された様子 内容を直接編集してみることができます。

構文

HTML 
<element contenteditable="true|false|plaintext-only">

属性値

contenteditable属性値
true 要素のコンテンツをユーザーが編集可能な状態にします。ユーザーがクリックしたりフォーカスを受けると、テキストを修正できるようになります。
"" 空文字列の場合はtrueの値と同じです。 ChatGPT에게 묻기
false 要素のコンテンツをユーザーが編集できない状態にします。つまり、要素内のテキストやコンテンツをクリックしたり修正したりできません。
plaintext-only 一般的なテキストとしてのみ編集可能です。HTMLタグやCSS、JavaScriptコードなどの書式は適用されません。

contenteditable="true" vs. contenteditable="plaintext-only"

次の例は、contenteditable="true"とcontenteditable="plaintext-only"の違いをよく示しています。以下のコピーするテキストをコピーして、コピーしたテキストをcontenteditable="true"とcontenteditable="plaintext-only"が設定されたそれぞれの要素に貼り付けて違いを確認してみてください！

HTML 
<p>contenteditable="true"</p>
<div contenteditable="true">
    コピーしたテキストを貼り付けてください！
</div>
<p>contenteditable="plaintext-only"</p>
<div contenteditable="plaintext-only">
    コピーしたテキストを貼り付けてください！
</div>
テキストをコピーして
コピーしたテキストを貼り付けてください！

contenteditable="true"はコピーしたテキストの書式が保持されるのに対し、contenteditable="plaintext-only"はコピーしたテキストの書式が保持されません。

注意点

上記の値を見るとわかるように、contenteditable属性はブール属性(boolean attribute)ではなく、列挙型(enum)属性です。

ご参照ください！
ブール属性（boolean attribute）は、属性名だけをマークアップすると値がtrueになり、それ以外の場合はfalseになる属性を指します。一方、列挙型(enum)属性は、属性に明示的に値を指定する必要がある属性を意味します。

値がない場合は空文字列（""）とみなされます。以下の例で確認できます。

HTML 
<div contenteditable style="padding: 15px; background: #eee; border-radius: 5px;">
    この内容を直接編集してみてください。
</div>
ブラウザで実際に表示された様子 値がない場合は空文字列（""）とみなされます。空文字列の場合はtrueの値と同じです。

contenteditable属性が適用されない要素

HTMLでは、次のような伝統的なユーザー入力要素は固有の機能を持っているため、contenteditable属性は適用されません。

  • <input>
  • <textarea>

ブラウザ互換性

contenteditable属性のブラウザ互換性
属性
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
contenteditable 1 12 3 4
contenteditable="plaintext-only" 51 12 136 13.1

仕様書

contenteditable属性に関する仕様書
仕様書
contenteditable HTML Standard
#attr-contenteditable

参考資料