HTML contenteditable グローバル属性
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。
試してみましょう
<blockquote contenteditable="true"> <p>このコンテンツを編集して、自分自身で引用を追加してください。</p> </blockquote> <cite contenteditable="true">-- ここに自分の名前を記入してください</cite> blockquote { background: #eee; border-radius: 5px; margin: 16px 0; } blockquote p { padding: 15px; } cite { margin: 16px 32px; font-weight: bold; } blockquote p::before { content: "\201C"; } blockquote p::after { content: "\201D"; } [contenteditable="true"] { caret-color: red; } Value
この属性は、以下の値のうち一つを取る必要があります。
trueまたは空文字列: 要素が編集可能であることを示すfalse: 要素が編集不可であることを示すplaintext-only: 要素の生のテキストは編集可能だが、リッチテキスト形式が無効であることを示す
この属性が値なしで指定された場合、たとえば <label contenteditable>Example Label</label> のような場合、値は空文字列として扱われます。
この属性が存在しないか、値が無効であった場合、値は親要素から継承されます。したがって、親が編集可能であればこの要素は編集可能になります。
なお、許可されている値は true と false ですが、この属性は列挙型であり、論理属性ではありません。
キャレットの挿入文字列を描画するのに使用される色は、 caret-color プロパティで設定できます。
contenteditable 属性を使用して編集可能になった要素、つまりインタラクティブになった要素は、フォーカスを当てることができます。また、キーボードの連続したナビゲーションに参加することができます。しかし、contenteditable 属性を持つ要素が他の contenteditable 要素の中に入れ子になっている場合、既定値ではタブ操作の順番に追加されません。tabindex 値 (tabindex="0") を指定することにより、ネストした contenteditable 要素をキーボードナビゲーションシーケンスに追加することができるようになります。
コンテンツが contenteditable="true" に対応する要素に貼り付けられた場合、すべての書式は保持されます。コンテンツが contenteditable="plaintext-only" に対応する要素に貼り付けられた場合、すべての書式は除去されます。
例
コンテンツを contenteditable へ貼り付け
この例には、contenteditable を持つ 2 つの <div> 要素があります。最初の要素の値は true、2 つ目の要素の値は plaintext-only です。以下のコンテンツをコピーして、それぞれの div に貼り付けて、その効果を確認してください。
HTML
<h2>貼り付け領域</h2> <section class="pasting"> <div class="wrapper"> <h3>contenteditable="true"</h3> <div contenteditable="true"></div> </div> <div class="wrapper"> <h3>contenteditable="plaintext-only"</h3> <div contenteditable="plaintext-only"></div> </div> </section> 仕様書
| Specification |
|---|
| HTML # attr-contenteditable |