js copy功能实现

IE - window下有个clipboardData对象，用来处理剪切板操作。

该对象下共有以下三个方法：

1. clearData(sDataFormat) 删除剪贴板中指定格式的数据。

2. getData(sDataFormat) 从剪贴板获取指定格式的数据。

3. setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。

一个简易的copy实现

function copyTip(text){
    if(window.clipboardData){
        window.clipboardData.clearData();  //清除之前的数据
        window.clipboardData.setData("Text",text);  //增加新内容
    }
    return true
};

但是clipboardData只是IE的私有方法，在chrome,firefox中并未实现。

标准的document对象中有个execCommand方法

浏览器支持力度如下：

• IE： 9+
• chrome: 42
• firefox: 41
• opera: 29
• safari: 不支持

通过document.execCommand实现的copy:

function copyTip(dom) {
    // 存储当前触焦的节点
    var currentFocus = document.activeElement;
    // 将当前传入的dom节点触焦
    dom.focus();
    // 高亮选中dom中的文本
    dom.setSelectionRange(0, dom.value.length);
    // 复制触焦节点的文本
    document.execCommand('copy');
    // 恢复原节点的触焦
    currentFocus.focus();
}

Element textarea 执行效果如下:

1484734821033.png

关于execCommand更多

@拭目以待

表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。