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

designMode プロパティ

document.designMode

 designMode プロパティは、Document オブジェクトを編集可能にするプロパティです。文章全体が編集可能になります。
 指定する値は"on""off"です。デフォルト値は"off"です。

designMode プロパティ
document.designMode = "on";

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

 古いバージョンでは"inherit"である場合もあります。IEは大文字です。

 エレメントごとに編集可能にするには HTMLElement.contentEditable = "true" にします。詳しくは HTMLElement を参照してください。

 編集可能になると、入力位置にキャレットが表示されます。キャレットの色を変えるには caret-color プロパティを使います。

 もしもエレメントを追加するやエレメントを変更するといった編集が必要なら以下のようなプロパティ、メソッドを利用します。

プロパティ、メソッド概要
Document.activeElement現在フォーカスのあるエレメント
Document.caretPositionFromPoint()キャレット(テキストの入力箇所を示すインジケーター)の場所を示す CaretPosition オブジェクト
Document.createElement()タグエレメントを新規生成
Node.appendChild()引数の Node を最後尾に追加
Node.cloneNode()Nodeを複製
Node.insertBefore()Nodeを指定Nodeの前に挿入
Node.remove()自身を削除
Node.removeChild()指定した子Nodeを削除
Node.replaceChild()指定した子Nodeを置き換える
Window.getSelection()テキストの選択範囲を取得

ページ内 Index

- ad -

構文(Syntax)

指定する値はonoffです。

値の取得

var value = document.designMode;

値の設定

document.designMode = value;

Example

 designMode プロパティの例です。以下の <iframe> 内の内容は編集可能になっています。

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

 キャレットの色を変えるには caret-color プロパティを使います。

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

- ad -