【HTML Living Standard】contenteditable属性の使い方

contenteditableプロパティは、HTML要素の内容をユーザーが直接編集可能にするかどうかを制御する情報を保持するプロパティです。このプロパティはHTMLのグローバル属性の一つであり、<div>や<p>、<span>といった通常のHTML要素に適用することで、その要素内のテキストやHTML構造をウェブブラウザ上でユーザーが直接編集できるようになります。これは、<input type="text">や<textarea>のような特定の入力フォーム要素とは異なり、あらゆるブロックレベル要素やインライン要素を編集可能にする柔軟性を提供します。

このプロパティには主に3つの値を設定できます。trueを設定するか、属性値を省略してcontenteditableとだけ記述した場合、その要素はユーザーが編集できるようになります。一方、falseを設定すると要素は編集できません。これはほとんどの要素の既定の動作です。また、inheritを設定すると、親要素のcontenteditableプロパティの設定を継承します。これが既定値となっています。

このプロパティを利用することで、ユーザーが直接コンテンツを編集できるリッチテキストエディタのような機能や、カスタムの入力フォームなどを簡単に実装できます。例えば、ウェブサイトの特定のセクションを「クリックして編集」できるようにする場面で役立ちます。ただし、ユーザーが編集した内容をデータベースなどに保存するには、JavaScriptを用いて変更を検知し、サーバーと連携する追加の処理が必要になります。セキュリティ上の観点から、ユーザーからの入力内容は常に検証することが重要です。

Copy
1<p contenteditable="true">この段落のテキストは編集可能です。</p>

引数なし

引数はありません

戻り値なし

戻り値はありません