contenteditable

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

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

  • true または 空文字列: 要素が編集可能であることを示す
  • false: 要素が編集不可であることを示す
  • plaintext-only: 要素の生のテキストは編集可能だが、リッチテキスト形式が無効であることを示す

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

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

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

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

contentitable 属性を使用して編集可能になった要素、つまりインタラクティブになった要素は、フォーカスを当てることができます。また、キーボードの連続したナビゲーションに参加することができます。しかし、contenteditable 属性を持つ要素が他の contenteditable 要素の中に入れ子になっている場合、既定値ではタブ操作の順番に追加されません。tabindex 値 (tabindex="0") を指定することにより、ネストした contenteditable 要素をキーボードナビゲーションシーケンスに追加することができるようになります。

仕様書

Specification
HTML
# attr-contenteditable

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contenteditable
contenteditable="plaintext-only"

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.

関連情報