原生JS复制内容到剪切板

技术分享  / 倒序浏览   ©

#楼主# 2020-2-10

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
需求:用户点击指定的地方就可以复制内容到剪切板
前置知识

document.execCommand()方法
先看看这个方法在 MDN 上是怎么界说的:
which allows one to run commands to manipulate the contents of the editable region.
意思就是可以允许运行命令来操作可编辑区域的内容,留意,是可编辑区域。
方法返回一个 Boolean 值,表示操作是否成功。
这个方法在之前的兼容性实在是不太好的,但是好在现在已经基本兼容所有主流浏览器了,在移动端也可以使用。
使用方法

需求:从输入框复制内容
现在页面上有一个  标签,我们想要复制其中的内容,我们可以这样做:
点我复制const btn = document.querySelector('#btn');btn.addEventListener('click', () => {    const input = document.querySelector('#demoInput')    // 选择要复制的表单元素的内容    input.select()    if (document.execCommand('copy')) {        document.execCommand('copy');        console.log('复制成功')        // 让表单元素失去核心        input.blur()    }})需求:其它地方复制
有的时候页面上并没有  标签,我们可能需要从一个  中复制内容,或者直接复制变量。
还记得在 execCommand() 方法的界说中提到,它只能操作可编辑区域,也就是意味着除了 、  这样的输入域以外,是无法使用这个方法的。
这时候我们需要曲线救国。
点我复制我的div盒子里面的内容,出现我代表复制成功了
const btn = document.querySelector('#btn');btn.addEventListener('click', () => {    const input = document.createElement('input')    const div = document.querySelector('#div')    document.body.appendChild(input)    input.setAttribute(        'value',        div.innerText    )    input.select()    if (document.execCommand('copy')) {        document.execCommand('copy')        console.log('复制成功')    }    document.body.removeChild(input)})算是曲线救国成功了吧。在使用这个方法时,碰到了几个坑。
在Chrome下调试的时候,这个方法时完美运行的。然后到了移动端调试的时候,坑就出来了,集中体现了ios的调试上

  • 1.点击复制时屏幕下方会出现白屏抖动,细致看是拉起键盘又刹时收起
    知道了抖动是由于什么产生的就比力好办理了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中添加 input.setAttribute('readonly','readonly');使这个 是只读的,就不会拉起键盘了。
    2.无法复制
    这个问题是由于 input.select() 在ios下并没有选中全部内容,我们需要使用另一个方法来选中内容,这个方法就是 input.setSelectionRange(0,input.value.length);。
    完整代码如下:
const btn = document.querySelector('#btn');btn.addEventListener('click', () => {    const input = document.createElement(        'input'    )    input.setAttribute('readonly', 'readonly')    input.setAttribute(        'value',        'hello world'    )    document.body.appendChild(input)    input.setSelectionRange(0, 9999)    if (document.execCommand('copy')) {        document.execCommand('copy')        console.log('复制成功')    }    document.body.removeChild(input)})
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

龙川啊哥

新手猿

  • 主题

    4

  • 帖子

    4

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆