contenteditable

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

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

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

この属性が値なしで指定された場合、たとえば <label contenteditable>Example Label</label> のような場合、値は空文字列として扱われます。

この属性が存在しないか、値が無効であった場合、値は親要素から継承されます。したがって、親が編集可能であればこの要素は編集可能になります。

なお、許可されている値は truefalse ですが、この属性は列挙型であり、論理型ではありません。

キャレットの挿入文字列を描画するのに使用される色は、 caret-color プロパティで設定できます。

仕様書

Specification Status Comment
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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
contenteditableChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3IE 完全対応 5.5Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
contenteditable="caret"
実験的
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
contenteditable="events"
実験的
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
contenteditable="plaintext-only"
実験的
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
contenteditable="typing"
実験的
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

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

関連情報