contenteditable
試してみましょう
contenteditable
グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
この属性は、以下の値のうち一つを取る必要があります。
true
または 空文字列: 要素が編集可能であることを示すfalse
: 要素が編集不可であることを示す
この属性が値なしで指定された場合、たとえば <label contenteditable>Example Label</label>
のような場合、値は空文字列として扱われます。
この属性が存在しないか、値が無効であった場合、値は親要素から継承されます。したがって、親が編集可能であればこの要素は編集可能になります。
なお、許可されている値は true
と false
ですが、この属性は列挙型であり、論理型ではありません。
キャレットの挿入文字列を描画するのに使用される色は、 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 のスナップショット、初回定義。 |
ブラウザーの互換性
BCD tables only load in the browser