備忘録的プログラミングリファレンス

contentEditable プロパティ

HTMLElement.contentEditable

 contentEditable プロパティは、HTMLElement オブジェクトの内容を編集可能にするプロパティです。 もしくは編集可能なエレメントであるかを確認することができます。
 このプロパティによって編集可能に成らない場合もありますので、設定の後に編集可能になったかの確認が必要かもしれません。

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

オブジェクトを編集可能にする
document.getElementById('example').contentEditable = true 
詳しくはExampleを参照してください

 値を true に設定すると、そのオブジェクトの内容が編集可能になります。
 デフォルトはタグエレメントによって違います。基本的には false ですが、<form> 部品のように編集できるエレメントはこの値は true です。
 もし親エレメントの contentEditable プロパティの値を継承するなら inherit です。

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

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

構文(Syntax)

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

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

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

返り値(Return Values)

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

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

Example

 contentEditable プロパティの例です。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が再実行されます。

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

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