JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLのcontenteditable属性で編集可能なコンテンツを作成する方法

HTMLでは、contenteditable属性を使うことで、要素の中身をブラウザ上で直接編集できるようにすることができます。この属性は、ユーザーがページ上のテキストを自由に書き換えられるインタラクティブなUIを実装したい場合に非常に便利です。

contenteditable属性の基本

contenteditable属性は、編集を許可する要素に"true"を指定するだけで有効になります。逆に、編集を無効化したい場合は"false"を指定します。

実装例

以下のコードは、HTMLでcontenteditable属性を実装する具体的な例です。編集可能な段落にカーソルを置くと、その内容を直接書き換えることができます。

<!DOCTYPE html>
<html>
   <body>
      <p contenteditable = "true">このコンテンツは編集可能です。実際に編集してみてください。</p>
      <p>これは通常のコンテンツです。編集することはできません。</p>
   </body>
</html>

動作のポイント

上記の例では、1つ目の段落にcontenteditable="true"が設定されているため、ブラウザで表示した際にそのテキスト部分をクリックしてカーソルを合わせると、まるでテキストエディタのように内容を編集できます。一方、2つ目の段落には属性が設定されていないため、通常どおり表示されるだけで編集はできません。

このようにcontenteditable属性を活用すれば、JavaScriptと組み合わせて簡易的なリッチテキストエディタや、コメントのインライン編集機能なども手軽に作成できます。

  1. HTML DOM DTオブジェクトとは？JavaScriptで動的に用語リストを生成する方法

    HTML DOM DTオブジェクトは、HTMLの<dt>要素（定義リスト内の「用語」を表す要素）に関連付けられたオブジェクトです。このDTオブジェクトを利用すると、JavaScriptを使って<dt>要素を動的に生成することができます。 構文 DTオブジェクトを作成するための基本的な構文は以下のとおりです。 var p = document.createElement(DT); サンプルコード それでは、HTML DOM DTオブジェクトの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body>

  2. HTMLリンク（ハイパーリンク）の基本！aタグの構文とtarget属性の使い方を解説

    HTMLのリンク（ハイパーリンク）とは、クリックすると別のドキュメントへジャンプできる要素のことです。Webページ同士をつなぐ役割を担っており、HTMLにおいて最も重要な機能の一つといえます。基本構文HTMLリンクは、<a>タグを使って以下のように記述します。<a href=URL target=値>リンクテキスト</a>href属性には、リンク先のアドレス（URL）を指定します。ローカルファイルへのパスでも、外部サイトのURLでも指定可能です。また、target属性は、リンク先のドキュメントをどこに開くかを指定する属性で、以下の4つの値を設定できます。値説