HTML Living Standard/contenteditable属性
contenteditable属性
[編集]contenteditable属性は、要素の内容をユーザーが編集可能にするかどうかを指定するために使用される属性です。この属性を使用すると、特定の要素をブラウザ上で直接編集できるようになります。属性値には、"true"（編集可能）、"false"（編集不可）、または"inherit"（親要素から継承）のいずれかを指定できます。
基本構文
[編集]<element contenteditable="true"></element> <element contenteditable="false"></element> <element contenteditable="inherit"></element>
属性値を省略してcontenteditable属性を指定した場合、デフォルトで"true"と解釈されます。
使用例
[編集]以下に、contenteditable属性を使用した具体的な例を示します。
<div contenteditable="true"> このテキストは編集可能です。 </div> <div contenteditable="false"> このテキストは編集できません。 </div> <div contenteditable="inherit"> このテキストは親要素の設定を継承します。 </div>
この例では、最初の要素は編集可能、2番目の要素は編集不可、3番目の要素は親要素のcontenteditable設定を継承します。
注意点
[編集]contenteditable="true"を指定すると、ブラウザ上で直接テキストを編集できますが、その編集内容は一時的なもので、リロードすると元に戻ります。- ユーザーが編集可能な要素には、ブラウザが提供するデフォルトの編集機能（コピー、ペースト、取り消しなど）が適用されます。
contenteditableを使用する場合、意図しない編集やスタイルの崩れを防ぐために、適切なイベント処理やCSSの制御を行う必要があります。
イベントリスナー
[編集]contenteditable属性を持つ要素に対しては、inputやblur、focusといったイベントを利用して編集内容を監視できます。
const editableDiv = document.querySelector('[contenteditable="true"]'); editableDiv.addEventListener('input', (event) => { console.log('現在の内容:', event.target.innerHTML); });
このスクリプトでは、編集可能な要素の内容が変更されるたびに、現在の内容がコンソールに出力されます。
実用例
[編集]contenteditable属性は、メモアプリやWYSIWYGエディタなど、ユーザーが直接コンテンツを編集するインターフェースの構築に利用されます。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応