contenteditable
contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 3 | ≤4 | 18 | ≤3.2 | |
| DOM API | ||||||
| contentEditable は HTMLElement インターフェイスのプロパティで、要素が編集可能かどうかを指定します。 | 1 | 12 | 3 | 3 | 18 | 1 |
| HTMLElement.isContentEditable は読み取り専用のプロパティで、論理値であり、要素の内容が編集可能な場合は true を返します。それ以外の場合は false を返します。 | 1 | 12 | 4 | 3 | 18 | 1 |
基本構文
HTML
<div contenteditable="true">
This section is editable. Click to edit.
</div>
<!-- plaintext-only で書式なしテキストのみ -->
<div contenteditable="plaintext-only">
Only plain text can be edited
</div>ライブデモ
実務での使いどころ
-
contenteditable の活用
contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。