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 をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 3 | IE 完全対応 5.5 | Opera 完全対応 9 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
contenteditable="events" | Chrome 完全対応 あり | Edge ? | Firefox 未対応 なし | IE 未対応 なし | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 未対応 なし | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
contenteditable="caret" | Chrome 完全対応 あり | Edge ? | Firefox 未対応 なし | IE 未対応 なし | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 未対応 なし | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
contenteditable="typing" | Chrome 完全対応 あり | Edge ? | Firefox 未対応 なし | IE 未対応 なし | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 未対応 なし | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
contenteditable="plaintext-only" | Chrome 完全対応 あり | Edge ? | Firefox 未対応 なし | IE 未対応 なし | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 未対応 なし | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
関連情報
- コンテンツを編集可能にする
- すべてのグローバル属性
HTMLElement.contentEditableおよびHTMLElement.isContentEditable- CSS の
caret-colorプロパティ