Chrome 72 で contenteditable �のスペース textnode が消えるバグが直った?

Chrome 72 で contenteditable �のスペース textnode が消えるバグが直った?:

バグメモ

contenteditable を使って編集可能にした DOM のキャレット座標を取得するために、キャレットに空の <span> を挿入し、その DOM の座標から割り出すという方法を実装していたところ、Chrome 71 ではスペースが消えてしまうという症状に出くわしました。そして解決方法としてスペースを   に置き換えることで消えないというハックを使いました。が、最近リリースされた Chrome 72 だとその症状が出なくなりました。バグイシューを調べたけど、該当の修正は見当たらず…。


再現コード

<!DOCTYPE html> 
<html> 
<body> 
<div id="editor" contenteditable="true">abc def</div> 
<script> 
  const editor = document.getElementById('editor') 
  editor.addEventListener('keyup', () => { 
    const anchor = document.createElement('span') 
    const sel = window.getSelection() 
    const range = sel.getRangeAt(0) 
    range.insertNode(anchor) 
    const caret_position = anchor.getBoundingClientRect() 
    console.log('caret_position: ', caret_position) 
    anchor.parentElement.removeChild(anchor) 
  }) 
</script> 
</body> 
</html> 
消える様子

1.gif

もともとの挙動がおかしかったので直ったのは素直に嬉しい。

コメント

このブログの人気の投稿

投稿時間:2021-06-17 22:08:45 RSSフィード2021-06-17 22:00 分まとめ(2089件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)