使用原生纯JS实现复制内容到剪贴板

初级版

<input id="demoInput" value="hello world">

<button id="btn">点我复制</button>

const btn = document.querySelector('#btn');

btn.addEventListener('click', () => {

    const input = document.querySelector('#demoInput');

    input.select();

    if (document.execCommand('copy')) {

        document.execCommand('copy');

        console.log('复制成功');

    }

})



中级版

<button id="btn">点我复制</button>

const btn = document.querySelector('#btn');

btn.addEventListener('click',() => {

    const input = document.createElement('input');

    document.body.appendChild(input);

     input.setAttribute('value', '听说你想复制我');

    input.select();

    if (document.execCommand('copy')) {

        document.execCommand('copy');

        console.log('复制成功');

    }

    document.body.removeChild(input);

})



中高级版

方法一:

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);

})

方法二

const el = document.createElement('input');

const btn = document.getElementById('btn');

el.value = '待复制文本';

el.style.opacity = '0';

document.body.appendChild(el);

const editable = el.contentEditable;

const readOnly = el.readOnly;

el.contentEditable = true;

el.readOnly = false;

const range = document.createRange();

range.selectNodeContents(el);

const sel = window.getSelection();

sel.removeAllRanges();

sel.addRange(range);

el.setSelectionRange(0, 999999);

el.contentEditable = editable;

el.readOnly = readOnly;

const ret = document.execCommand('copy');

el.blur();

btn.text = ret ? '已复制' : '复制失败';



高级版:

还没有,如不满意,搜索关键字"execommand 踩过的坑",其他的搜索都是copy的

网友评论

1条评论

发表

网友评论

1条评论

发表

最新评论

11月13日 23:36

推荐文章

彩龙

Copyright © 2008-2019 彩龙社区(http://www.clzg.cn) 版权所有 All Rights Reserved.

免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。

经营许可证编号:滇B2-20090009-7

下载我家昆明APP 下载彩龙社区APP