如果有这样的需求：点击一个按钮，复制某个文本的文字到剪贴板以供使用，我们就需要用到一些方法。在 pc 上我们复制文本可以使用
document.execCommand(‘copy’);
但是在移动端是不行的。我选用的方案是 clipboard，实测效果完美。
在 clipboard 官网 https://clipboardjs.com 上，有详细的安装使用方法：我们可以使用 npm 包，也可以使用 cdn。地址：https://github.com/zenorocha/…
我以 cnd 举例：
<script src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js”></script>
<script>
const clipboard = new ClipboardJS(‘.copy_click’);
$(‘.copy_click’).addEventListener(‘touchstart’, function() {
let clipboard = new Clipboard(‘.copy_click’);
clipboard.on(‘success’, function(e) {
alert(‘ 复制成功 ’)
});
clipboard.on(‘error’, function(e) {
alert(‘ 复制失败 ’)
});
})
function $(param){
return document.querySelector(param)
}
</script>
<body>
<textarea class=”summary_context” id=”summary_context”>12345</textarea>
<div class=”copy_click” data-clipboard-action=”copy” data-clipboard-target=”#summary_context” onclick=””> 复制文案 </div>
</body>
<style>
.summary_context{
border:0;
outline: none !important;
}
</style>
这里针对 iOS 不能复制做了几点改变：如果是安卓 <textarea> 完全可以换成 <text>，可以省去大部分样式上的麻烦，但是 iOS 上必须得用 textarea。使用了 textarea，还应该考虑一个问题：高度自适应的问题，textarea 默认只显示两排文字，如果需要复制的文本很多，在 textarea 中排成很多排，需要做处理。我自己做了个很笨拙的方法：
// 根据文字字数来适应 textarea 高度
function switchTextHeight(){
let $summaryContext = $(‘#summary_context’)
let baseLen = 14; // 一行可以显示 14 个汉字，如果有英文字母不能写得这么简单
textLength = $summaryContext.value.length;
for (let i=0; i<10; i++) {// 最多显示 10 行
if (textLength >= baseLen * i && textLength <= baseLen * (i + 1)) {
$summaryContext.style.height = 0.64 * (i + 1) + ‘rem’; //0.64rem 为一行字的行高，如果有自动编译直接写 px
}
}
}
function $(param){
return document.querySelector(param)
}