枠や領域を編集可能にする - ContentEditable を利用した編集可能な枠の作成 - HTML

ContentEditable 属性を利用した編集可能な枠の実装コードを紹介します。

概要

ContentEditable 属性を利用すると、Webブラウザで編集可能な枠(領域)を作成できます。

例1

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <h2>ContentEditable のデモ</h2>

  <section id="editable" contenteditable="true">
    この枠の文字列は<br />
    編集可能です。<br />
  </section>

  <p>フッタ</p>
</body>
</html>

表示結果

上記のHTMLページを開くと下図の画面が表示されます。

編集可能な枠をクリックすると、キャレットが表示されます。

キーボードで文字列を入力できます。

改行も可能です。

バックスペースやDELキーで文字列の削除もできます。

すべての文字列を削除することもできます。

Internet Explorer の場合は、[Ctrl+Z]キーでUndo処理もできます。

ドラッグによる文字列洗濯もできます。

右クリックでポップアップメニューも表示できます。

[切り取り]、[削除]、[貼り付け]などの処理も可能です。

例2 : section タグ以外での動作

sectionタグ以外でのコードです。

コード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <h2 contenteditable="true">ContentEditable のデモ (ここも編集可能)</h2>

  <div id="editable" contenteditable="true">
    この枠の文字列は<br />
    編集可能です。<br />
  </div>

  <p contenteditable="true">フッタも編集できます。</p>
</body>
</html>