HTML5のテキストAPIについて

このページでは、HTML5におけるテキスト編集を紹介します。

ウェブコンテンツ編集

HTML5では、テキストボックスやテキストエリアだけでなく、通常のコンテンツも編集可能にできます。

例:

この段落は編集可能です。ここをクリックすると編集できます。

上記の段落をクリックすると、テキストボックスのように編集可能になります。
段落部分のHTMLソースは以下のとおりです。

contenteditable属性は、どの要素にもつけられます。

ドキュメント全体を編集可能にする

iframeやobject要素などを使って組み込むコンテンツ全体を編集可能にすることができます。

まずは、iframe要素を用意します。

今回は、編集用のコンテンツとしてedit.htmlというページを用意しています。
この場合、edit.htmlは以下のようにします。

サンプル結果は以下となります。

Text Selection API

HTML5では、ユーザーが選択したウェブページのテキスト情報を取得するためのAPIが提供されています。

このページ内のテキストを選択すると、その部分の文字が下記に表示されます。

Javascriptは以下となります。ただし、このサンプルはスマホでは試せません。

広告
  • LINEで送る