designMode プロパティ
document.designMode
designMode プロパティは、Document オブジェクトを編集可能にするプロパティです。文章全体が編集可能になります。
指定する値は"on"
と"off"
です。デフォルト値は"off"
です。
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)
指定する値はon
とoff
です。
値の取得
var value = document.designMode;
値の設定
document.designMode = value;
Example
designMode プロパティの例です。以下の <iframe> 内の内容は編集可能になっています。
キャレットの色を変えるには caret-color プロパティを使います。
Document.execCommand() メソッドがありましたが、Document.execCommand() メソッドは非推奨になっておりその動作は保証されるものではありません。
- ad -