移动端复制文本到粘贴板,clipboard.js的使用,移动端与PC端复制粘贴兼容写法

1.首先引用clipboard.js

<script src=”clipboard.min.js”></script>
2.html

文本文档要用textarea,复制按钮要用button
<textarea id=”number” class=”number” spellcheck=”false” readonly>9999999</textarea>
<button data-clipboard-action=”copy” data-clipboard-target=”#number” id=”codeCopy” class=”copy”></button>
spellcheck=”false”去掉文字检查,readonly不可编辑,data-clipboard-action=”copy” data-clipboard-target=”#number”插件自带的属性
3.css样式
.show .num .number {

font-style: normal;
color: #d2c79d;
touch-action: manipulation;
background-color: transparent!important;
font-size: 15px;
outline: none;
resize: none;
border: none;
height: 16px;
overflow: hidden;
}
.show .num .copy {

background-color: transparent!important;
-webkit-tap-highlight-color: transparent!important;
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
4.js代码
<script>
var clipboard = new ClipboardJS(‘.copy’);

clipboard.on(‘success’, function(e) {
console.info(‘Action:’, e.action);
console.info(‘Text:’, e.text);
console.info(‘Trigger:’, e.trigger);
layer.msg(“Copy sukses!”);
e.clearSelection();
});
</script>

至此,兼容移动端和PC端的复制粘贴功能完美实现,感谢 clipboard.js 作者!!

作者:_Alverson
来源:CSDN
原文:https://blog.csdn.net/shn923/…
版权声明:本文为博主原创文章,转载请附上博文链接!

    原文作者:Alverson
    原文地址: https://segmentfault.com/a/1190000018674769
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞