JS实现复制功能

JS实现复制功能

网页上经常会有复制文字到剪贴板的需求

例如一些博客上的代码段上有复制按钮, 可以实现代码的复制

对于我这种面向复制粘贴编程的人来说简直是福音

基本思路

借用document.execCommand函数, 这个函数可以实现很多功能, 我这里只介绍如何使用这个函数实现复制, 关于这个函数其他的东西, 可以参考MDN上的介绍

使用这个函数的复制功能, 可以复制可编辑区域中光标选中的文字到剪贴板

当文字在页面可编辑区域显示并可选的时候, 可以使用setSelectionRange方法选中并调用execCommand函数实现复制

但是有时候不一定能够选中文字, 或者文字不在页面显示(例如复制当前链接), 所以统一的解决方案是: 动态创建一个input节点, 并把需要复制的文字放在这个节点上并选中, 然后再调用execCommand函数实现复制

这个时候就可以复制封装成一个copy函数了

关于document.execCommand函数

这个函数接收三个参数, 并返回一个布尔值

• 参数:
  • 参数1: String类型(必须), 指定操作类型(copy代表复制)
  • 参数2: Boolean类型(可选), 是否展示用户界面, 默认值为false, 一般都为false
  • 参数3: Object类型(可选), 一些额外的参数
• 返回值:
  • 返回一个布尔值, 如果返回false表示操作不被支持

关于setSelectionRange函数

setSelectionRange函数属于HTMLInputElement.prototype上的方法

可以使用input节点去调用

该方法可以选中input上的文字, 接收两个Number类型的参数, 分别代表选中的始末位置

copy函数代码

/**
 * 复制字符串到剪贴板的函数
 * @param {String} value 需要被复制的字符串
 * @returns {Boolean} 操作结果
 */
function copy(value){
    var currentFocus = document.activeElement;// 保存当前活动节点
    
    var input = document.createElement('input');// 创建一个input标签
    document.body.appendChild(input);// 把标签添加给body
    input.style.opacity = 0;//设置input标签设置为透明(不可见)
    input.value = value;// 把需要复制的值放到input上

    // 记录当前滚动位置, 因为添加节点并选中的时候会影响页面滚动
    var scrollY = window.scrollY;

    input.focus();// input节点获取焦点
    input.setSelectionRange(0, input.value.length);// 选中input框中的所有文字

    var res = document.execCommand('copy', true);// 复制文字并获取结果

    currentFocus.focus();// 之前活动节点获得焦点
    document.body.removeChild(input);// 删除添加的input节点

    // 页面滚动到之前位置
    window.scrollTo(0, scrollY);
    
    return res;// 返回操作结果
}