JS 实现一键复制功能

JavaScript011

JS 实现一键复制功能,第1张

复制是一个使用频率特别高的操作,在网页中,一般可以选中要复制的内容,使用快捷键ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容,我们还可以用JS实现复制,这得益于document的execCommand('copy') 命令。

我们可以通过表单元素的select()方法选中内容,表单元素因为textarea限制少于input,所以推荐使用textarea。我们可以动态创建一个textarea元素,将textarea的value属性值设置为上面的innerText属性值,再执行textarea的select方法选中。

上面实现了选中,下面就可以实现复制功能了。

最后一步就可以用execCommand('copy')实现复制了,它可以复制浏览器中选中的文本,比如说上面被textarea选中的文本,复制之后记得移除textarea。

第二步和第三步可以优化一下,创建一个copy函数,函数参数设置为第一步需要复制的文本,返回值为复制的结果。

完整JS示例如下:

使用示例

可以将上面的完整JS示例写入一个JS文件,将JS文件引入HTML中,通过JS点击事件来执行复制函数。

功能 :点击按钮,复制值。

实现方法 :通过原生js 的方法 document.execCommand('copy')

巨坑 :document.execCommand(‘copy’)不生效

原因 :

    1.input框不能有disabled属性

    2.根据第一条扩展,input的width || height 不能为0;

    3.input框不能有hidden、display:none属性

解决方案 :在不改变原需求的情况下,新增一个input框,然后设置 opacity:0实现不可见, position:absolute脱离文档流解决占空间的问题

语法:

document.execCommand(aCommandName,aShowDefaultUI,aValueArgument),返回值Boolean 如果返回false 则表示还不能支持;

参数说明:

1.aCommandName

        命令的名称:常用的为"copy","cut"等;

                注:“copy” 拷贝当前选中内容到剪贴板

                        “cut”  剪贴当前选中的文字并复制到剪贴板

2.aShowDefaultUI

        是否展示用户界面,一般为 false;

3.aValueArgument

      默认为null,

示例

<!-- html -->

        <!-- 点击复制输入框value值 -->

        <input type="text" id="copyVal" value="被复制的内容" />

        <!-- 点击复制div标签的innerHTML -->

        <div id="copyInner">被复制的内容</div>

        <button onclick="myCopy">点击复制</button>

// 方法一:点击按钮复制文本框内容

    function myCopy(){

        var copyVal = document.getElementById('copyVal')

        copyVal.select()

        document.execCommand('copy')

    }

    // 方法二:点击按钮复制div标签内容

    function myCopy(){

        const range = document.createRange()

        range.selectNode(document.getElementById('copyInner'))

        const selection = window.getSelection()

        if(selection.rangeCount >0) selection.removeAllRanges()

        selection.addRange(range)

        document.execCommand('copy')

    }

一、 错误实现

var array1 = new Array("1","2","3") 

var array2 

array2 = array1 

array1.length = 0 

alert(array2) //返回为空

这种做法是错的,因为javascript分原始类型与引用类型(与java、c#类似)。Array是引用类

型。array2得到的是引用,所以对array1的修改会影响到array2。

二、 使用slice()

可使用slice()进行复制,因为slice()返回也是数组。

var array1 = new Array("1","2","3") 

var array2 

array2 = array1.slice(0) 

array1.length = 0 

alert(array2) //返回1、2、3 

三、 使用concat()

注意concat()返回的并不是调用函数的Array,而是一个新的Array,所以可以利用这一点进行复制。

var array1 = new Array("1","2","3") 

var array2 

array2 = array1.concat() 

array1.length = 0 

alert(array2) //返回1、2、3