draggable な親の contenteditable な子の挙動について

contenteditable 要素

div 要素などの直接編集などブラウザ上で直感的に操作可能となる属性だが・・・

draggable 要素の子 (あるいは孫) 要素としての contenteditable 要素

複数のブラウザ間での挙動の違いにより実装として利用する際に注意が必要な模様

draggableParent-contenteditableChild

<div draggable="true">
  draggable
  <div contenteditable="true">content editable</div>
</div>

Chrome

contenteditable, draggable それぞれの期待される挙動が確認される

• contenteditable 要素内においてはクリックした箇所にカーソル (キャレット) が移動する
• draggable 属性を持つ要素についてドラッグ (&ドロップ) が可能

FireFox

• HTML の記述のみでは draggable による挙動は実現されない

• draggable="true" となる親要素を持つ contenteditable="true" の要素において
  クリックによるカーソル位置が要素の先頭となる

  • 十字キーなどで移動したのち、一度フォーカスを外して (onblur)
    再度フォーカスしたところカーソル位置が変更されていないようなので
    クリックによるカーソル移動が行われないと思われる

Microsoft Edge

• シングルクリックでは contenteditable 要素にフォーカスしない
• ダブルクリックにて初めて contenteditable 要素へのフォーカスが行われる
• ただしクリックによるカーソルの移動については
  Firefox と同様にクリックによるカーソル移動は行われなかった

属性の指定、変更による解決

親、あるいは先祖となる要素に draggable="true" となる要素が存在しなければ
contenteditable な要素に対しクリックがそのまま編集個所の指定となりそう・・

<div draggable="false">
  draggable
  <div contenteditable="true">content editable</div>
</div>

jQuery 対応

:has により先祖をことごとく無効化してしまう

draggable無効化

jQuery(':has([contenteditable])').prop('draggable', false);