react 简单而美好:ReactDOM 源码对选区的处理(三),这里讲一些基础知识。

先回顾下前面的内容。
👉 ReactDOM 源码对选区的处理(一) 之 怎么获取偏移量:
juejin.im
👉 ReactDOM 源码对选区的处理(二) 之 通过偏移量和 document.activeElement 找到选区的目标节点和符合原生 api 的偏移量:juejin.im


为什么需要恢复选区功能:
This is useful when performing operations that could remove dom nodes and place them back in, resulting in focus being lost.

图1 是 react 对选区兼容性的处理:
原生 DOM api 对部分 input 类型 和 textarea 开放了选区的属性和接口,参见:html.spec.whatwg.org
ReactDOM 使用 activeElement 和 getSelection 扩大了选区功能的支持范围:支持具有编辑功能的 div 节点


图2 是使用 document.activeElement 获取到不同的活跃元素
developer.mozilla.org
👉 划选了 input, textarea, 具有 contenteditable 的 div内部的全部或部分内容,那 document.activeElement 是这个元素本身
👉 划选了普通 div 内部的内容(含多个div夸选),那 document.activeElement 是 body
展开
昵称可以为空于2020-09-08 09:32发布的图片
昵称可以为空于2020-09-08 09:32发布的图片
3