兼容性
IE9以上基本都已经支持该API
Paste_Image.png
selection 实例
- 获取selction
window.selection方法 -
anchor用户操作开始的地方 -
focus用户操作结束的地方 -
range是包含element文本节点的html片段，通常来说用户选择的selection包含一个range实例， 多实例的功能只有火狐支持。
实例属性
| 属性名称 | 类型 | 描述 |
|---|---|---|
| anchorNode | NodeElement | 用户选择区域开始的节点 |
| anchorOffset | Number | 如果anchorNode是文本节点，anchorOffset表示用户选择开始的字符相对节点内容首个字符的偏移，如果是element 则表示，该节点相对element子元素的位置。 |
| forcusNode | NodeElement | 用户选择区域结束的节点 |
| forcusOffset | Number | 如果forcusNode是文本节点，forcusOffset表示用户选择开始的字符相对节点内容首个字符的偏移，如果是element 则表示，该节点相对element子元素的位置。 |
| isCollapsed | Boolean | 用户操作的起始点和终点是否重合（可以用来判断是否是有效操作，为true时表示取消操作） |
| rangeCount | Number | 返回选区内range的个数 |
实例方法
下面介绍的方法是chrome已经支持的方法
- getRangeAt() 返回 当全选中的range对象中的某一个
- collapse(parentNode, offset)销毁现有的
selection实例并用parentNode.childNodes[offset]作为anchor和focus生成新的selection来替换。 - extend(parentNode, offset) 移动
focus到指定位置不改变anchor
var sel = window.getSelection();
sel.extend(sel.focusNode, sel.focusOffset + 5);
- selectAllChildren(parentNode)
parentNode的所有子元素被加入到selection中替换掉了原有的。 - deleteFromDocument() 从document中删除
- toString 返回当前被选中的内容的文本
- containsNode(aNode,aPartlyContained) 表明文本aNode是否在Seleciton中 aPartlyContained === false 要求aNode必须在seleciton中 aPartlyContained === true 部分在即可
window.getSelection().containsNode(document.body, true)
>>true
复制内容到剪贴板
// preViewEl: HTMLParagraphElement;
copy = (e: Event) => {
let range,
selection;
try{
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(this.preViewEl);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
this.preViewEl.blur();
}catch(e){
debugger;
}
}
注意
preViewEl 一定是需要展示在页面上的元素，不能使用display隐藏， 可以定位到可视区域的外面。
// 双击复制内容组件
// @flow
import React, { Component } from 'react';
class SelectAllText extends Component{
props: {
children: ReactElement
};
rootEl: HTMLDivElement;
select = (e) =>{
try{
const selection = window.getSelection();
const range = document.createRange();
const targetEl = this.rootEl.firstElementChild;
if (!targetEl) return;
range.selectNodeContents(targetEl);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
targetEl.blur();
}catch(e){
$.message.show({
type: 'error',
msg: '复制内容到剪贴板失败'
})
}
}
render(){
return (
<div onDoubleClick={this.select} ref={el => this.rootEl = el}>
{this.props.children}
</div>
)
}
}
export default SelectAllText;
