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

このページのタグ:[HTML] [HTML5]
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>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


h2タグの文字列、divタグの文字列、pタグの文字列、いずれも contenteditable="true" が指定されていると編集可能になります。


登録日 :2016-09-28    最終更新日 :2016-10-03
このページのタグ:[HTML] [HTML5]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)