contentEditable プロパティ

HTMLElement.contentEditable

　contentEditable プロパティは、HTMLElement オブジェクトの内容を編集可能にするプロパティです。もしくは編集可能なエレメントであるかを確認することができます。

オブジェクトを編集可能にする

document.getElementById('example').contentEditable = true;

表示例

この段落は <p> エレメントですが、contentEditable プロパティで編集可能にしてあります。
タグエレメントによって編集可能にならない場合もあります。

詳しくは Example を参照してください

　contentEditable プロパティの値を true に設定すると、そのオブジェクトの内容が編集可能になります。

　似たプロパティに Document.designMode があります。 Document.designMode プロパティはドキュメント全体が編集可能になります。

　編集可能なエレメントであるかを知る方法に HTMLElement.isContentEditable プロパティがあります。

- ad -

contentEditable プロパティについて

　contentEditable プロパティはエレメントを編集可能にする属性です。この属性値を true に設定すると、そのオブジェクトの内容が編集可能になります。

　デフォルトはタグエレメントによって違います。基本的には false ですが、<form> 部品のように編集できるエレメントのcontentEditable プロパティの値は true です。
　もし親エレメントの contentEditable プロパティの値を継承するなら inherit を指定します。

　このエレメントによって編集可能に成らない場合もありますので、設定の後に編集可能になったかの確認が必要かもしれません。

　詳しい仕様は ElementContentEditable ミックスインを参照してください。

構文(Syntax)

　このプロパティは、値の設定と取得ができます。値は DOMString 型です。

// 値の取得
DOMString = HTMLElement.contentEditable;
// 値の設定
HTMLElement.contentEditable = [ 'true' | 'false' | 'inherit' ];

値	摘要
true	編集可能に
false	編集不可
inherit	親エレメントを継承

返り値(Return Values)

　返り値も設定値と同じです。

値	摘要
true	編集可能に
false	編集不可
inherit	親エレメントを継承

Example

　contentEditable プロパティの例です。

　入力位置を示す記号であるキャレットの色を変えるには caret-color プロパティを使います。

Document.execCommand() メソッドがありましたが、Document.execCommand() メソッドは非推奨になっておりその動作は保証されるものではありません。