h5实现一键复制到粘贴板 兼容ios

文章2019-06-25223 人已阅来源:ZHAO_

之前发布过一篇文章原生 js 实现点击按钮复制文本,后来发现在ios的safari上失效。现又找到一个解决方案。

实现原理

采用document.execCommand('copy')来实现复制到粘贴板功能

复制必须是选中input框的文字内容,然后执行document.execCommand('copy')命令实现复制功能。
初步实现方案

const input = document.querySelector('#copy-input');
    if (input) {
    input.value = text;
    if (document.execCommand('copy')) {
        input.select();
        document.execCommand('copy');
        input.blur();
        alert('已复制到粘贴板');
    }
}

兼容性问题

1、input 输入框不能hidden或者display: none;如果需要隐藏输入框可以使用定位脱离文档流,然后移除屏幕

#copy-input{
    position: absolute;
    left: -1000px;
    z-index: -1000;
}

2、ios下不能执行document.execCommand('copy')

在ios设备下alert(document.execCommand('copy'))一直返回false
查阅相关资料发现ios下input不支持input.select();

因此拷贝的文字必须存在,不能为空字符串,不然也不会执行复制空字符串的功能

参考这篇博客实现了ios下复制的功能https://blog.csdn.net/VLilyV/article/details/77523591

主要是使用textbox.createTextRange方法选中输入框的文字

// input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
    if (textbox.createTextRange) {//ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);//起始光标
        range.moveEnd('character', stopIndex - startIndex);//结束光标
        range.select();//不兼容苹果
    } else {//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
    }
}

3、ios设备上复制会触发键盘弹出事件

给input加上readOnly只读属性

踩完以上的坑,总结的代码如下
git地址https://github.com/zhaosheng808/copytext

copyText = (text) => {
    // 数字没有 .length 不能执行selectText 需要转化成字符串
    const textString = text.toString();
    let input = document.querySelector('#copy-input');
    if (!input) {
        input = document.createElement('input');
        input.id = "copy-input";
        input.readOnly = "readOnly";        // 防止ios聚焦触发键盘事件
        input.style.position = "absolute";
        input.style.left = "-1000px";
        input.style.zIndex = "-1000";
        document.body.appendChild(input)
    }

    input.value = textString;
    // ios必须先选中文字且不支持 input.select();
    selectText(input, 0, textString.length);
    console.log(document.execCommand('copy'), 'execCommand');
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        alert('已复制到粘贴板');
    }
    input.blur();

    // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是input方法
    function selectText(textbox, startIndex, stopIndex) {
        if (textbox.createTextRange) {//ie
            const range = textbox.createTextRange();
            range.collapse(true);
            range.moveStart('character', startIndex);//起始光标
            range.moveEnd('character', stopIndex - startIndex);//结束光标
            range.select();//不兼容苹果
        } else {//firefox/chrome
            textbox.setSelectionRange(startIndex, stopIndex);
            textbox.focus();
        }
    }
};


// 复制文字

// 必须手动触发 点击事件或者其他事件,不能直接使用js调用!!!
copyText('h5实现一键复制到粘贴板 兼容ios')


/*兼容性补充:
    移动端:
    安卓手机:微信(chrome)和几个手机浏览器都可以用。
    苹果手机:微信里面和sarafi浏览器里也都可以,
    PC:sarafi版本必须在10.2以上,其他浏览器可以.
    兼容性测试网站:https://www.caniuse.com/
*/

原文:ZHAO_