contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
この属性は、以下の値のうち一つを取る必要があります。
trueまたは 空文字列: 要素が編集可能であることを示すfalse: 要素は編集不可であることを示す
この属性を設定しなかった場合の既定値は、親要素から継承された値です。
この属性は列挙型であり、論理型ではありません。これは値 true、false または空文字列のいずれかを明示的に使用することが必須であり、 <label contenteditable>Example Label</label> といった省略形は認められないということです。正しい使用法は <label contenteditable="true">Example Label</label> です。
キャレットの挿入文字列を描画するのに使用される色は、 caret-color プロパティで設定できます。
仕様書
| Specification | Status | Comment |
|---|---|---|
| HTML Editing APIs contenteditable の定義 |
編集者草案 | "events", "caret", "typing", "plaintext-only" を追加 |
| HTML Living Standard contenteditable の定義 |
現行の標準 | 最新のスナップショットである HTML 5.2 から変更なし。 |
| HTML 5.2 contenteditable の定義 |
勧告 | HTML Living Standard のスナップショット、 HTML 5.1 から変更なし |
| HTML 5.1 contenteditable の定義 |
勧告 | HTML Living Standard のスナップショット、 HTML5 から変更なし |
| HTML5 contenteditable の定義 |
勧告 | HTML Living Standard のスナップショット、初回定義。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | 3 | 5.5 | 9 | あり |
contenteditable="events" | あり | ? | なし | なし | ? | ? |
contenteditable="caret" | あり | ? | なし | なし | ? | ? |
contenteditable="typing" | あり | ? | なし | なし | ? | ? |
contenteditable="plaintext-only" | あり | ? | なし | なし | ? | ? |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | あり | 4 | あり | あり | ? |
contenteditable="events" | あり | あり | ? | なし | ? | ? | ? |
contenteditable="caret" | あり | あり | ? | なし | ? | ? | ? |
contenteditable="typing" | あり | あり | ? | なし | ? | ? | ? |
contenteditable="plaintext-only" | あり | あり | ? | なし | ? | ? | ? |
関連情報
- コンテンツを編集可能にする
- すべてのグローバル属性
HTMLElement.contentEditableおよびHTMLElement.isContentEditable- CSS の
caret-colorプロパティ