js兼容安卓和IOS的复制文本到剪切板

背景介绍

// 当在进行点击按钮复制功能时，可能会遇到一些常见问题。其中有些问题是关于不同系统手机的兼容性，
// 如复制后对文本的选中以及输入法的弹出等问题。为了解决这些问题，以下提供了一个方法。
// 这个方法主要采用原生JS实现，且具有较强的适用性。

HTML 结构

// 你可以在文本的部分使用 p 标签或者 div 标签。
<div class="copy-font">
    <div class="uuid-code" id="content">saidfh3is21111h</div>
    <button class="btn-copy" id="copyBT">复制</button>
</div>

JavaScript 实现

// 使用原生JavaScript来实现复制功能。
// 首先，我们需要选中我们要复制的文本。
// 接着，我们需要检测设备中是否有其他的复制文本缓存，并清除它。
// 最后，将需要复制的文本进行赋值，并调用DOM对象的copy功能，然后返回一个"复制成功"的提示。

function copyArticle(event) {
    // 创建一个范围并选中我们要复制的元素
    const range = document.createRange();
    range.selectNode(document.getElementById('content'));
    
    // 获取当前选中的内容，如果有任何内容被选中，则全部删除
    const selection = window.getSelection();
    if(selection.rangeCount > 0) selection.removeAllRanges();
    
    // 将我们创建的范围添加到选中的内容中
    selection.addRange(range);
    
    // 执行复制命令
    document.execCommand('copy');
    
    // 提示用户复制成功
    alert("复制成功！");
}

// 添加点击事件监听器到复制按钮上
document.getElementById('copyBT').addEventListener('click', copyArticle, false);