本文小编为大家详细介绍“如何用JavaScript+Html5实现按钮拷贝文字到剪切板功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何用JavaScript+Html5实现按钮拷贝文字到剪切板功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
一:引入插件:
<script src="js/clipboard.min.js" type="text/javascript"></script>
<div id="btn" data-clipboard-text="1"> <span>copy</span> </div>
三:定义script :实现复制功能
<script> var clipboard = new Clipboard('btn'); clipboard.on('success', function(e) { e.clearSelection(); //复制成功 }); clipboard.on('error', function(e) { //复制失败 }); </script>
补充:new Clipboard()----参数为id class都可以,跟css定义一样 id 或者.class
new Clipboard('.btn', { target: function(trigger) { return trigger.nextElementSibling; } });
通过return返回想复制的内容,
可以给每个item自定义属性data-clipboard-text即可
div.setAttribute("data-clipboard-text","asdf");
补充:电脑浏览器几乎都可以支持,手机上安卓可以,苹果有点问题,需要把标签设置成button
读到这里,这篇“如何用JavaScript+Html5实现按钮拷贝文字到剪切板功能”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程之家行业资讯频道。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。