前端实现复制功能

常用的API：

Document.createRange()：返回一个Renge对象，通过Range对象可以选中文本。

// 选中id为test的元素的内容
const range = document.createRange();
range.selectNode(document.getElementById('test'));
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);

Window.getSelection：返回一个 Selection对象，表示用户选择的文本范围或光标的当前位置。

const selection = window.getSelection();
const selectedText = selection.toString();  // 获取当前选中的文本
console.log(selectedText)

document.execCommand：document暴露 execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素。

// const bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
const bool = document.execCommand('copy'); // 执行复制命令

在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。

        关于标签的位置问题，虽然可以放在里面，也可放在里面，但为了避免浏览器加载延迟，最好是放在前面。

内部嵌入：直接在HTML文档内使用标记对引入。

示例代码：

    
    
    前端实现复制功能



    

        姓名：复制
    
    

        个人描述：
        复制
    

    
        
            姓名复制
            性别复制
        
        
            
                
小王
            
            
                
女
            
        
    
    
		/*
		* 复制输入框内容
		*/
        function copyInput1() {
            var copyVal = document.querySelector("#input_copy1");
            copyVal.select();
            return document.execCommand('copy');
        }
        function copyInput2() {
            var copyVal = document.querySelector("#input_copy2");
            copyVal.select();
            return document.execCommand('copy');
        }

		/*
		* 复制元素节点的内容
		*/
        function copyDiv1() {
            var range = document.createRange();
            range.selectNode(document.querySelector('#div_copy1'));
            var selection = window.getSelection();
            if (selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);
            return document.execCommand('copy');
        }
        function copyDiv2() {
            var range = document.createRange();
            range.selectNode(document.querySelector('#div_copy2'));
            var selection = window.getSelection();
            if (selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);
            return document.execCommand('copy');
        }

		/*
		* 提示
		* param {Boolean} status
		*/
        function tips(status) {
            if (status) {
                alert('复制内容成功');
            } else {
                alert('复制失败，可选中内容手动复制');
            }
        }

        document.querySelector('.copy_input1').addEventListener('click', function () {
            var isCopyed = copyInput1();
            tips(isCopyed);
        }, false);
        document.querySelector('.copy_input2').addEventListener('click', function () {
            var isCopyed = copyInput2();
            tips(isCopyed);
        }, false);

        document.querySelector('#copy_div1').addEventListener('click', function () {
            var isCopyed = copyDiv1();
            tips(isCopyed);
        }, false);
        document.querySelector('#copy_div2').addEventListener('click', function () {
            var isCopyed = copyDiv2();
            tips(isCopyed);
        }, false);
    

运行效果：

如果是输入类型元素：直接调用select方法选中内容，再启动copy命令

如果是普通元素 ：需要通过document.createRange选中节点内容，再通过window.getSelection选中元素内容，再启动copy命令

注意：

input输入类型的元素

• 不能有disabled属性
• width || height 不能为0
• 不能有hidden、display:none属性

普通类型元素

• width || height 不能为0
• 不能有display:none属性

外部引入：通过src属性指定外部JavaScript文件链接。

        这里使用 src 属性引入javascript.js的JS文件，在js文件里面，无需写了，直接开始js脚本的编写。

示例代码：

 

    
    
    前端实现复制功能

 

    

        姓名：复制
    
    

        个人描述：
        复制
    
 
    
        
            姓名复制
            性别复制
        
        
            
                
小王
            
            
                
女
            
        
    
    

 

copy.js

/*
* 复制输入框内容
*/
function copyInput1() {
    var copyVal = document.querySelector("#input_copy1");
    copyVal.select();
    return document.execCommand('copy');
}
function copyInput2() {
    var copyVal = document.querySelector("#input_copy2");
    copyVal.select();
    return document.execCommand('copy');
}

/*
* 复制元素节点的内容
*/
function copyDiv1() {
    var range = document.createRange();
    range.selectNode(document.querySelector('#div_copy1'));
    var selection = window.getSelection();
    if (selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    return document.execCommand('copy');
}
function copyDiv2() {
    var range = document.createRange();
    range.selectNode(document.querySelector('#div_copy2'));
    var selection = window.getSelection();
    if (selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    return document.execCommand('copy');
}

/*
* 提示
* param {Boolean} status
*/
function tips(status) {
    if (status) {
        alert('复制内容成功');
    } else {
        alert('复制失败，可选中内容手动复制');
    }
}

document.querySelector('.copy_input1').addEventListener('click', function () {
    var isCopyed = copyInput1();
    tips(isCopyed);
}, false);
document.querySelector('.copy_input2').addEventListener('click', function () {
    var isCopyed = copyInput2();
    tips(isCopyed);
}, false);

document.querySelector('#copy_div1').addEventListener('click', function () {
    var isCopyed = copyDiv1();
    tips(isCopyed);
}, false);
document.querySelector('#copy_div2').addEventListener('click', function () {
    var isCopyed = copyDiv2();
    tips(isCopyed);
}, false);

注意：本人测试此处js代码必须放到HTML代码的后面才起作用，原因未知，希望大佬们指教！