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
先回顾下前面的内容。
为什么需要恢复选区功能:
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 开放了选区的属性和接口,参见:
ReactDOM 使用 activeElement 和 getSelection 扩大了选区功能的支持范围:支持具有编辑功能的 div 节点
图2 是使用 document.activeElement 获取到不同的活跃元素
展开
3
3