js copy功能实现

js复制,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方法

浏览器支持力度如下:


通过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 执行效果如下:


关于execCommand更多