contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。

この属性は、以下の値のうち一つを取る必要があります。

  • true または 空文字列: 要素が編集可能であることを示す
  • false: 要素は編集不可であることを示す

この属性を設定しなかった場合の既定値は、親要素から継承された値です。

この属性は列挙型であり、論理型ではありません。これは値 truefalse または空文字列のいずれかを明示的に使用することが必須であり、 <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 のスナップショット、初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3IE 完全対応 5.5Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera 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 ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, silverskyvicto, yyss
最終更新者: mfuji09,