如果有这样的需求：点击一个按钮，复制某个文本的文字到剪贴板以供使用，我们就需要用到一些方法。在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)
}
发表回复