最近、HTML5 ページ内で contenteditable を使用していて、特定の要素で使用するとバグに遭遇しました。実際に安全に使用できる場所と方法を知りたいです。
span要素を contenteditable にすると、Firefox 1と Chrome 2の両方でバグのある動作が発生することがわかりました。ただし、divまたはセクションをcontenteditable にすることは完全に安全に見えます3。
何人かが言及しているガイドラインは、ブロック レベルの要素のみを contenteditable にする必要があるというものです。ただし、Mozilla Developer Networkは、 h1からh6までの見出し要素をブロックレベル要素としてリストしており、見出し要素を contenteditable にすることは Firefox 4ではバグが多く、Chrome 5ではページがクラッシュする可能性があります。
div とセクションだけでなく、それ以上のものを使用できるようにしたいのですが、実際に contenteditable を安全に作成できる要素については明確ではありません。安全に とは、通常の条件下で要素を使用することで、予期しないことやバグのあることをせずに通常の編集タスクを実行できることを意味します。書き込み、コンテンツの削除、切り取り、コピー、貼り付け、テキスト カーソルの移動、およびテキストの強調表示を予期しない動作や奇妙な動作なしで実行できるはずです。
では、実際に contenteditable を安全に作成できるのはどの要素でしょうか? 特定のカテゴリはありますか？safe-contenteditable 要素が一致しなければならない特定の基準はありますか?
バグノート:
- スパン付きの Firefox 21: テキスト カーソルが要素の先頭または末尾に移動すると、要素はフォーカスを失いますが、コンテンツを削除して移動した場合はフォーカスを失いません。要素の一部を強調表示し、カットしてから貼り付けると、その時点で要素が 2 つに分割され、2 つの部分の間に空白の要素が挿入されます。貼り付けようとしていたテキストは実際にはどこにも配置されません。
- スパン付きの Chrome 27: ワードラップなどによってスパンが複数の行にまたがる場合、コンテンツをカット アンド ペーストすると、ペーストされたコンテンツの後に改行が挿入されることがよくあります。
- div を display:inline にしない限り、その場合でも 1 のようにフォーカスを失う可能性がありますが、明らかにテキスト カーソルを最後に移動した場合のみです。ただし、この要素の「通常の」使用法は考慮していません。
- Firefox 21 の見出し付き: コンテンツの一部を選択してから切り取りと貼り付けを行うと、1 と同様に、その時点で見出し要素が半分に分割され、2 つの半分の間に 3 つ目の見出し要素が挿入されます。少なくとも、貼り付けたコンテンツはその中に含まれますが、最初は 1 つだった見出し要素が 3 つになりました。
- 見出し付きの Chrome 27: コンテンツを選択してカット アンド ペーストします。ページがクラッシュします。あなたは「ああスナップ！」を取得します。メッセージ。それでおしまい。
デモコード
上記を再現するためのデモです。それは非常に単純ですが、現時点で再現されていないのは焦点を失うバグだけです.
[contenteditable=true] {
border: 1px dotted #999;
}<article style="width: 100px">
<h1 contenteditable="true">Heading</h1>
<p>
<strong>Some adjacent content</strong>
<span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
</p>
<div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>